mirror of
https://github.com/C9Glax/tranga-website.git
synced 2025-04-19 23:03:20 +02:00
82 lines
1.7 KiB
CSS
82 lines
1.7 KiB
CSS
span[is-loading="done"] {
|
|
display: none;
|
|
}
|
|
|
|
span[is-loading="loading"] {
|
|
transform: rotateZ(45deg);
|
|
perspective: 1000px;
|
|
border-radius: 50%;
|
|
width: 32px;
|
|
height: 32px;
|
|
color: var(--second-background-color);
|
|
position: fixed;
|
|
background-color: var(--secondary-color);
|
|
background-blend-mode: lighten;
|
|
margin: 25vh calc(sin(70)*(50% - 40px));
|
|
}
|
|
|
|
span[is-loading="loading"]:before,
|
|
span[is-loading="loading"]:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: inherit;
|
|
height: inherit;
|
|
border-radius: 50%;
|
|
transform: rotateX(70deg);
|
|
animation: 1s spin linear infinite;
|
|
}
|
|
span[is-loading="loading"]:after {
|
|
color: var(--primary-color);
|
|
transform: rotateY(70deg);
|
|
animation-delay: .4s;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: translate(-50%, -50%) rotateZ(0deg);
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateccw {
|
|
0% {
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
0%,
|
|
100% {
|
|
box-shadow: .2em 0px 0 0px currentcolor;
|
|
}
|
|
12% {
|
|
box-shadow: .2em .2em 0 0 currentcolor;
|
|
}
|
|
25% {
|
|
box-shadow: 0 .2em 0 0px currentcolor;
|
|
}
|
|
37% {
|
|
box-shadow: -.2em .2em 0 0 currentcolor;
|
|
}
|
|
50% {
|
|
box-shadow: -.2em 0 0 0 currentcolor;
|
|
}
|
|
62% {
|
|
box-shadow: -.2em -.2em 0 0 currentcolor;
|
|
}
|
|
75% {
|
|
box-shadow: 0px -.2em 0 0 currentcolor;
|
|
}
|
|
87% {
|
|
box-shadow: .2em -.2em 0 0 currentcolor;
|
|
}
|
|
}
|