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 animationNameis 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 - [email protected]

^^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