80 lines
1.5 KiB
CSS
80 lines
1.5 KiB
CSS
body {
|
|
margin: 0;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: black;
|
|
}
|
|
|
|
.loader {
|
|
width: 20em;
|
|
height: 20em;
|
|
font-size: 10px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loader .face {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
border-style: solid;
|
|
animation: animate 3s linear infinite;
|
|
}
|
|
|
|
.loader .face:nth-child(1) {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: gold;
|
|
border-color: currentColor transparent transparent currentColor;
|
|
border-width: 0.2em 0.2em 0em 0em;
|
|
--deg: -45deg;
|
|
animation-direction: normal;
|
|
}
|
|
|
|
.loader .face:nth-child(2) {
|
|
width: 70%;
|
|
height: 70%;
|
|
color: lime;
|
|
border-color: currentColor currentColor transparent transparent;
|
|
border-width: 0.2em 0em 0em 0.2em;
|
|
--deg: -135deg;
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
.loader .face .circle {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 0.1em;
|
|
top: 50%;
|
|
left: 50%;
|
|
background-color: transparent;
|
|
transform: rotate(var(--deg));
|
|
transform-origin: left;
|
|
}
|
|
|
|
.loader .face .circle::before {
|
|
position: absolute;
|
|
top: -0.5em;
|
|
right: -0.5em;
|
|
content: '';
|
|
width: 1em;
|
|
height: 1em;
|
|
background-color: currentColor;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 2em,
|
|
0 0 4em,
|
|
0 0 6em,
|
|
0 0 8em,
|
|
0 0 10em,
|
|
0 0 0 0.5em rgba(255, 255, 0, 0.1);
|
|
}
|
|
|
|
@keyframes animate {
|
|
to {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|