|
|
|
@ -8,25 +8,25 @@ |
|
|
|
|
z-index: 2000; |
|
|
|
|
text-align: center; |
|
|
|
|
height: 100vh; |
|
|
|
|
.inner{ |
|
|
|
|
.inner { |
|
|
|
|
position: absolute; |
|
|
|
|
height: 170px; |
|
|
|
|
width: 170px; |
|
|
|
|
left: 50%; |
|
|
|
|
top: 50%; |
|
|
|
|
transform: translate( -50%, -50% ); |
|
|
|
|
border: 1px solid $primary-color; |
|
|
|
|
border-top: 5px solid $primary-color; |
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
border: 1px solid $primary; |
|
|
|
|
border-top: 5px solid $primary; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
animation: spin 1s infinite linear; |
|
|
|
|
@include desktop{ |
|
|
|
|
@include desktop { |
|
|
|
|
height: 150px; |
|
|
|
|
width: 150px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.percentage { |
|
|
|
|
z-index: 100; |
|
|
|
|
color: $primary-color; |
|
|
|
|
color: $primary; |
|
|
|
|
opacity: 1; |
|
|
|
|
font-weight: 600; |
|
|
|
|
font-family: "bebasbold"; |
|
|
|
@ -38,18 +38,17 @@ |
|
|
|
|
top: 50%; |
|
|
|
|
-webkit-transform: translate(-50%, -50%); |
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
@include desktop{ |
|
|
|
|
@include desktop { |
|
|
|
|
font-size: 50px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@keyframes spin{ |
|
|
|
|
@keyframes spin { |
|
|
|
|
0% { |
|
|
|
|
transform: translate( -50%, -50% ) rotate(0); |
|
|
|
|
transform: translate(-50%, -50%) rotate(0); |
|
|
|
|
} |
|
|
|
|
100% { |
|
|
|
|
transform: translate( -50%, -50% ) rotate(360deg); |
|
|
|
|
transform: translate(-50%, -50%) rotate(360deg); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|