🔧 CSS Loading Animation - 1

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