Hi guys,
In this tutorial,
we are going to use for loop at our pug, scss preprocessor.
PUG/JADE (HTML preprocessor)
.wrapper
- for(var i = 0; i < 21; i++)
span
and
SCSS (CSS preprocessor)
body{
margin: 0;
padding: 0;
min-height: 100vh;
@mixin j-center{
display: flex;
justify-content: center;
align-items: center;
}
@include j-center;
.wrapper{
$s: 40vmin;
width: $s;
height: $s;
position: relative;
span{
display: block;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
// border: solid red;
@for $i from 1 through 22{
&:nth-child(#{$i}){
transform: rotate(calc(#{$i} * 20deg));
animation: 2s linear animate infinite;
opacity: 0;
@keyframes animate{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
animation-delay: #{$i * .1}s;
&:not(:last-child)::after{
content: '';
$s: 10px;
width: $s;
height: $s;
position: absolute;
background: red;
border-radius: 50%;
}
}
&:last-child{
animation: 2s linear lastchild infinite!important;
opacity: 1!important;
@keyframes lastchild{
0%{
transform: rotate(0deg) scale(1.1);
}
100%{
transform: rotate(360deg) scale(1.1);
}
}
&::after{
content: '\f072';
$s: 20px;
width: $s;
height: $s;
position: absolute;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #555;
transform: scale(2)
}
}
}
}
}
}
and here is our codepen testing code.
In the previous tutorial we have learned something about for loop pug, scss, and after we learn the basics we will apply those effect our basic tutorial.
Here is the for loop pug, scss tutorial https://dev.to/nikhilroy2/for-loop-developer-how-to-use-pug-jade-scss-javascript-python-backend-stack-tutorial-1-3h3p
Thanks all.