| 1 |
.sq-loader { |
| 2 |
width: 100%; |
| 3 |
display: flex; |
| 4 |
align-items: center; |
| 5 |
justify-content: center; |
| 6 |
flex-direction: column; |
| 7 |
} |
| 8 |
.sq-loader .sqp-spinner { |
| 9 |
border: 3px solid rgba(0, 194, 163, 0.1); |
| 10 |
border-top-color: #00c2a3; |
| 11 |
border-radius: 50%; |
| 12 |
width: 24px; |
| 13 |
height: 24px; |
| 14 |
animation: loader-spin 0.8s linear infinite; |
| 15 |
} |
| 16 |
.sq-loader.sqt--small .sqp-spinner { |
| 17 |
border-width: 2px; |
| 18 |
width: 16px; |
| 19 |
height: 16px; |
| 20 |
} |
| 21 |
.sq-loader.sqt--large .sqp-spinner { |
| 22 |
border-width: 4px; |
| 23 |
width: 48px; |
| 24 |
height: 48px; |
| 25 |
} |
| 26 |
.sq-loader.sqm--dark .sqp-spinner { |
| 27 |
border-color: rgba(255, 255, 255, 0.1); |
| 28 |
border-top-color: #fff; |
| 29 |
} |
| 30 |
@keyframes loader-spin { |
| 31 |
0% { |
| 32 |
transform: rotate(0deg); |
| 33 |
} |
| 34 |
100% { |
| 35 |
transform: rotate(360deg); |
| 36 |
} |
| 37 |
} |
| 38 |
|
