subnub
128 lines
2.2 KiB
SCSS
128 lines
2.2 KiB
SCSS
.spinner {
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid #3498db;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-left: 50%;
|
|
text-align: center;
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
.spinner-small {
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid #3498db;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 50%;
|
|
text-align: center;
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.spinner--small-margin {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.spinner__no-margin {
|
|
margin: 0;
|
|
margin-bottom: 108px;
|
|
}
|
|
|
|
.homepage__spinner__wrapper {
|
|
position: fixed;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Style the background of the progress bar */
|
|
.custom-progress::-webkit-progress-bar {
|
|
background-color: #e0dcf3; /* Light gray for the background */
|
|
border-radius: 3px;
|
|
height: 5px;
|
|
}
|
|
|
|
/* Style the filled portion of the progress bar */
|
|
.custom-progress::-webkit-progress-value {
|
|
background-color: #3c85ee; /* Blue for progress */
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* For Firefox */
|
|
.custom-progress::-moz-progress-bar {
|
|
background-color: #3c85ee; /* Blue for progress */
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Adjust the overall progress bar appearance */
|
|
.custom-progress {
|
|
width: 100%;
|
|
height: 5px;
|
|
appearance: none; /* Remove default styling */
|
|
border: none;
|
|
}
|
|
|
|
.custom-progress-failed {
|
|
width: 100%;
|
|
height: 5px;
|
|
appearance: none;
|
|
border-radius: 3px;
|
|
border: none;
|
|
background-color: red;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.custom-progress-success {
|
|
width: 100%;
|
|
height: 5px;
|
|
appearance: none;
|
|
border-radius: 3px;
|
|
border: none;
|
|
margin-top: 15px;
|
|
@apply bg-green-600;
|
|
}
|
|
|
|
.custom-progress.indeterminate {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Animation for indeterminate progress */
|
|
.custom-progress.indeterminate::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 50%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, #3c85ee, transparent);
|
|
animation: loading 1.5s infinite;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
left: -50%;
|
|
width: 50%;
|
|
}
|
|
50% {
|
|
left: 25%;
|
|
width: 50%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
width: 50%;
|
|
}
|
|
}
|