45 lines
964 B
CSS
45 lines
964 B
CSS
@keyframes rotate {
|
|
0% { transform: rotate(0deg); }
|
|
50% { transform: rotate(360deg); }
|
|
100% { transform: rotate(720deg); }
|
|
}
|
|
|
|
@keyframes prixClipFix {
|
|
0%, 100% {
|
|
clip-path: polygon(50% 50%,0 0,0 0,0 0,0 0,0 0);
|
|
}
|
|
25%, 63% {
|
|
clip-path: polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0);
|
|
}
|
|
37%, 50% {
|
|
clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%);
|
|
}
|
|
}
|
|
|
|
.taf > .window-content span {
|
|
&.loader {
|
|
--size: 35px;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
border-radius: 50%;
|
|
position: relative;
|
|
animation: rotate 2s linear infinite;
|
|
display: block;
|
|
|
|
&::before, &::after {
|
|
content: "";
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
inset: 0px;
|
|
border-radius: 50%;
|
|
border: 5px solid var(--spinner-outer-colour, #fff);
|
|
animation: prixClipFix 4s linear infinite;
|
|
}
|
|
|
|
&::after{
|
|
inset: 8px;
|
|
transform: rotate3d(90, 90, 0, 180deg );
|
|
border-color: var(--spinner-inner-colour, #ff3d00);
|
|
}
|
|
}
|
|
}
|