|
|
@@ -26,98 +26,17 @@ body,
|
|
|
}
|
|
|
|
|
|
.loader {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- background-color: #ffffff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
.loader-content {
|
|
|
- width: 300px;
|
|
|
- height: 300px;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- --h: calc(var(--percent) / 100 * 360);
|
|
|
- color: hsl(var(--h), 100%, 75%);
|
|
|
- animation: changeColor 5s linear infinite;
|
|
|
- > span {
|
|
|
- position: absolute;
|
|
|
- --diameter: calc(50px + (var(--n) - 1) * 30px);
|
|
|
- width: var(--diameter);
|
|
|
- height: var(--diameter);
|
|
|
- border-style: solid;
|
|
|
- border-color: currentColor transparent;
|
|
|
- border-width: 10px 10px 0 0;
|
|
|
- border-radius: 50%;
|
|
|
- animation: rotating 5s linear infinite;
|
|
|
- animation-duration: calc(5s / (9 - var(--n) + 1));
|
|
|
- &:nth-child(1) {
|
|
|
- --n: 1;
|
|
|
- }
|
|
|
- &:nth-child(2) {
|
|
|
- --n: 2;
|
|
|
- }
|
|
|
- &:nth-child(3) {
|
|
|
- --n: 3;
|
|
|
- }
|
|
|
- &:nth-child(4) {
|
|
|
- --n: 4;
|
|
|
- }
|
|
|
- &:nth-child(5) {
|
|
|
- --n: 5;
|
|
|
- }
|
|
|
- &:nth-child(6) {
|
|
|
- --n: 6;
|
|
|
- }
|
|
|
- &:nth-child(7) {
|
|
|
- --n: 7;
|
|
|
- }
|
|
|
- &:nth-child(8) {
|
|
|
- --n: 8;
|
|
|
- }
|
|
|
- &:nth-child(9) {
|
|
|
- --n: 9;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes rotating {
|
|
|
- to {
|
|
|
- transform: rotate(1turn);
|
|
|
- }
|
|
|
+ animation: changeColor 3s linear infinite;
|
|
|
}
|
|
|
+
|
|
|
@keyframes changeColor {
|
|
|
0%,
|
|
|
100% {
|
|
|
- --percent: 0;
|
|
|
- }
|
|
|
- 10% {
|
|
|
- --percent: 10;
|
|
|
- }
|
|
|
- 20% {
|
|
|
- --percent: 20;
|
|
|
- }
|
|
|
- 30% {
|
|
|
- --percent: 30;
|
|
|
- }
|
|
|
- 40% {
|
|
|
- --percent: 40;
|
|
|
+ transform: translateY(-30px);
|
|
|
}
|
|
|
50% {
|
|
|
- --percent: 50;
|
|
|
- }
|
|
|
- 60% {
|
|
|
- --percent: 60;
|
|
|
- }
|
|
|
- 70% {
|
|
|
- --percent: 70;
|
|
|
- }
|
|
|
- 80% {
|
|
|
- --percent: 80;
|
|
|
- }
|
|
|
- 90% {
|
|
|
- --percent: 90;
|
|
|
+ transform: translateY(0px);
|
|
|
}
|
|
|
}
|
|
|
}
|
CzRger
