34 lines
1005 B
SCSS
34 lines
1005 B
SCSS
|
.c__loader {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
border-radius: 50%;
|
||
|
|
position: relative;
|
||
|
|
animation: rotate 1s linear infinite
|
||
|
|
}
|
||
|
|
.c__loader::before , .c__loader::after {
|
||
|
|
content: "";
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 5px solid var(--c--theme--colors--primary-700);
|
||
|
|
animation: prixClipFix 2s linear infinite ;
|
||
|
|
}
|
||
|
|
.c__loader::after{
|
||
|
|
border-color: var(--c--theme--colors--primary-400);
|
||
|
|
animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
|
||
|
|
inset: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate {
|
||
|
|
0% {transform: rotate(0deg)}
|
||
|
|
100% {transform: rotate(360deg)}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes prixClipFix {
|
||
|
|
0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
|
||
|
|
25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
|
||
|
|
50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
|
||
|
|
75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
|
||
|
|
100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
|
||
|
|
}
|