78 lines
1.3 KiB
CSS
78 lines
1.3 KiB
CSS
|
/* Sourced and modified from https://cssloaders.github.io/ */
|
||
|
|
|
||
|
|
.spinner {
|
||
|
|
display: block;
|
||
|
|
animation: rotate 1s infinite;
|
||
|
|
height: 50px;
|
||
|
|
width: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spinner:before,
|
||
|
|
.spinner:after {
|
||
|
|
border-radius: 50%;
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
height: 20px;
|
||
|
|
width: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spinner:before {
|
||
|
|
animation: ball1 1s infinite;
|
||
|
|
background-color: var(--red);
|
||
|
|
box-shadow: 30px 0 0 var(--blue);
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spinner:after {
|
||
|
|
animation: ball2 1s infinite;
|
||
|
|
background-color: var(--blue);
|
||
|
|
box-shadow: 30px 0 0 var(--red);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg) scale(0.8)
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: rotate(360deg) scale(1.2)
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: rotate(720deg) scale(0.8)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes ball1 {
|
||
|
|
0% {
|
||
|
|
box-shadow: 30px 0 0 var(--blue);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
box-shadow: 0 0 0 var(--blue);
|
||
|
|
margin-bottom: 0;
|
||
|
|
transform: translate(15px, 15px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
box-shadow: 30px 0 0 var(--blue);
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes ball2 {
|
||
|
|
0% {
|
||
|
|
box-shadow: 30px 0 0 var(--red);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
box-shadow: 0 0 0 var(--red);
|
||
|
|
margin-top: -20px;
|
||
|
|
transform: translate(15px, 15px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
box-shadow: 30px 0 0 var(--red);
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
}
|