Loader 3D avec des variables Sass
HTML
index.html <div class="view">
<div class="plane">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
CSS
style.css @layer demo {
.view {
perspective: 400;
}
.plane {
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(-30deg);
animation: rotate 20s infinite linear;
}
.plane .circle {
width: 200px;
height: 200px;
position: absolute;
transform-style: preserve-3d;
border-radius: 100%;
border: 2px solid white;
box-sizing: border-box;
}
.plane .circle:nth-child(1) {
transform: rotateZ(60deg) rotateX(63.435deg) scale(1);
box-shadow: 0 0 60px hsl(60, 50%, 50%), inset 0 0 60px hsl(60, 50%, 50%);
animation: rotateCircle1 3000ms ease-in-out infinite forwards 0.5s;
}
.plane .circle:nth-child(1):before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 100vmax;
border: 2px solid hsl(0, 50%, 100%);
top: 0;
left: 0;
transform: translate3d(0px, 250px, 0px);
box-shadow: 0 0 60px hsla(72, 50%, 50%, 0.3), inset 0 0 60px hsla(72, 50%, 50%, 0.3);
filter: blur(60px);
}
@keyframes rotateCircle1 {
0%, 100% {
transform: rotateZ(60deg) rotateX(63.435deg) scale(1);
}
50% {
transform: rotateZ(0deg) rotateX(63.435deg) scale(0.1666666667);
}
}
.plane .circle:nth-child(2) {
transform: rotateZ(120deg) rotateX(63.435deg) scale(1);
box-shadow: 0 0 60px hsl(120, 50%, 50%), inset 0 0 60px hsl(120, 50%, 50%);
animation: rotateCircle2 3000ms ease-in-out infinite forwards 1s;
}
.plane .circle:nth-child(2):before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 100vmax;
border: 2px solid hsl(0, 50%, 100%);
top: 0;
left: 0;
transform: translate3d(0px, 250px, 0px);
box-shadow: 0 0 60px hsla(144, 50%, 50%, 0.3), inset 0 0 60px hsla(144, 50%, 50%, 0.3);
filter: blur(60px);
}
@keyframes rotateCircle2 {
0%, 100% {
transform: rotateZ(120deg) rotateX(63.435deg) scale(1);
}
50% {
transform: rotateZ(0deg) rotateX(63.435deg) scale(0.3333333333);
}
}
.plane .circle:nth-child(3) {
transform: rotateZ(180deg) rotateX(63.435deg) scale(1);
box-shadow: 0 0 60px hsl(180, 50%, 50%), inset 0 0 60px hsl(180, 50%, 50%);
animation: rotateCircle3 3000ms ease-in-out infinite forwards 1.5s;
}
.plane .circle:nth-child(3):before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 100vmax;
border: 2px solid hsl(0, 50%, 100%);
top: 0;
left: 0;
transform: translate3d(0px, 250px, 0px);
box-shadow: 0 0 60px hsla(216, 50%, 50%, 0.3), inset 0 0 60px hsla(216, 50%, 50%, 0.3);
filter: blur(60px);
}
@keyframes rotateCircle3 {
0%, 100% {
transform: rotateZ(180deg) rotateX(63.435deg) scale(1);
}
50% {
transform: rotateZ(0deg) rotateX(63.435deg) scale(0.5);
}
}
.plane .circle:nth-child(4) {
transform: rotateZ(240deg) rotateX(63.435deg) scale(1);
box-shadow: 0 0 60px hsl(240, 50%, 50%), inset 0 0 60px hsl(240, 50%, 50%);
animation: rotateCircle4 3000ms ease-in-out infinite forwards 2s;
}
.plane .circle:nth-child(4):before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 100vmax;
border: 2px solid hsl(0, 50%, 100%);
top: 0;
left: 0;
transform: translate3d(0px, 250px, 0px);
box-shadow: 0 0 60px hsla(288, 50%, 50%, 0.3), inset 0 0 60px hsla(288, 50%, 50%, 0.3);
filter: blur(60px);
}
@keyframes rotateCircle4 {
0%, 100% {
transform: rotateZ(240deg) rotateX(63.435deg) scale(1);
}
50% {
transform: rotateZ(0deg) rotateX(63.435deg) scale(0.6666666667);
}
}
.plane .circle:nth-child(5) {
transform: rotateZ(300deg) rotateX(63.435deg) scale(1);
box-shadow: 0 0 60px hsl(300, 50%, 50%), inset 0 0 60px hsl(300, 50%, 50%);
animation: rotateCircle5 3000ms ease-in-out infinite forwards 2.5s;
}
.plane .circle:nth-child(5):before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 100vmax;
border: 2px solid hsl(0, 50%, 100%);
top: 0;
left: 0;
transform: translate3d(0px, 250px, 0px);
box-shadow: 0 0 60px hsla(0, 50%, 50%, 0.3), inset 0 0 60px hsla(0, 50%, 50%, 0.3);
filter: blur(60px);
}
@keyframes rotateCircle5 {
0%, 100% {
transform: rotateZ(300deg) rotateX(63.435deg) scale(1);
}
50% {
transform: rotateZ(0deg) rotateX(63.435deg) scale(0.8333333333);
}
}
.plane .circle:nth-child(6) {
transform: rotateZ(360deg) rotateX(63.435deg) scale(1);
box-shadow: 0 0 60px hsl(0, 50%, 50%), inset 0 0 60px hsl(0, 50%, 50%);
animation: rotateCircle6 3000ms ease-in-out infinite forwards 3s;
}
.plane .circle:nth-child(6):before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 100vmax;
border: 2px solid hsl(0, 50%, 100%);
top: 0;
left: 0;
transform: translate3d(0px, 250px, 0px);
box-shadow: 0 0 60px hsla(72, 50%, 50%, 0.3), inset 0 0 60px hsla(72, 50%, 50%, 0.3);
filter: blur(60px);
}
@keyframes rotateCircle6 {
0%, 100% {
transform: rotateZ(360deg) rotateX(63.435deg) scale(1);
}
50% {
transform: rotateZ(0deg) rotateX(63.435deg) scale(1);
}
}
}
@keyframes rotate {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}