Hello everyone, in this tutorial, I'll show you how to use HTML and SASS to make a circular loading animation (You can compile the CSS from SASS in Codepen).
Let's get started...
What We are going to create?
HTML -
<div class="outer__circle">
<div class="inner__circle__one">
<div class="inner__circle__two">
<div class="inner__circle__three"></div>
</div>
</div>
</div>
- I have created 4 circle one inside the other.
CSS -
body{
height:100vh;
display:grid;
place-items:center;
background-color:rgb(0,0,0,1);
}
.outer__circle,
.inner__circle__one,
.inner__circle__two,
.inner__circle__three{
display:grid;
place-items:center;
border-radius:50%;
}
- Setting up the body's styling to position the loader in the middle; applying the grid and place-items properties to each of the four circles so that they are all centered inside the outer circle. border-radius to give them a circular appearance.
@mixin circle($width:100%,$height:100%,$borderDirection:border,$borderColor:black,$animationTime:1s){
width:$width;
height:$height;
#{$borderDirection}:3px solid $borderColor;
animation:rotation 2s linear infinite forwards;
}
// Animation mixin
@mixin animation($animationName){
@keyframes #{$animationName}{
@content
}
}
- Created a mixin with the circle's width, height, border side, and border color attributes. Every circle now has an animation due to the animation that was added to the mixin.
- Another mixin named animation was created, and by using "@content," any animation for the keyframe can be defined.
- The parameter animationName is another one it has.
.outer__circle{
@include circle(80px,80px,border-top,crimson);
}
.inner__circle__one{
@include circle(70px,70px,border-bottom,lime);
}
.inner__circle__two{
@include circle(60px,60px,border-right,cyan);
}
.inner__circle__three{
@include circle(50px,50px,border-left,violet);
}
- Setting the styles for the circles by Including the mixin using "@include".
- Each circle will have different styling using the parameters values passed.
@include animation(rotation){
from{
transform:rotate(0deg)
}
to{
transform:rotate(360deg)
}
}
- Using the animation mixin to define our animation body, It will create an infinite rotation effect.
THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--
Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd
https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144
https://dev.to/shubhamtiwari909/swiperjs-3802
https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90
Top comments (0)