CSS Circle Loading Spinner

Hi friends in this tutorial, I show you how to create circle loading spinner using CSS. The CSS loading spinner is seemingly the most popular loading spinner you will see, it is made up of 12 circles which spin together in a circle, all of the circles will have different opacity. The spinning effect will come from changing the opacity of all of the loading circle, doing it look like the whole thing is spinning.

loading_model_7.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Loading_model_7</title>
<style>
body{
 background-color:#c71254;
}
.sa-round{
 margin: 300px auto;
 width: 40px;
 height: 40px;
 position:relative;
}
.sa-round .sa-child{
 width:100%;
 height:100%;
 position: absolute;
 left: 0;
 top: 0;
}
.sa-round .sa-child:before{
 content: '';
 display:block;
 margin: 0 auto;
 width: 15%;
 height:15%;
 background-color:#FFF;
 border-radius: 100%;
 -webkit-animation: sa-roundBounceDelay 1.3s infinite ease-in-out both;
 animation: sa-roundBounceDelay 1.3s infinite ease-in-out both;
}
.sa-round .sa-round_2{
 -webkit-transform: rotate(30deg);
 -ms-transform:rotate(30deg);
 transform: rotate(30deg);
}
.sa-round .sa-round_3{
 -webkit-transform: rotate(60deg);
 -ms-transform:rotate(60deg);
 transform: rotate(60deg);
}
.sa-round .sa-round_4{
 -webkit-transform: rotate(90deg);
 -ms-transform:rotate(90deg);
 transform: rotate(90deg);
}
.sa-round .sa-round_5{
 -webkit-transform: rotate(120deg);
 -ms-transform:rotate(120deg);
 transform: rotate(120deg);
}
.sa-round .sa-round_6{
 -webkit-transform: rotate(150deg);
 -ms-transform:rotate(150deg);
 transform: rotate(150deg);
}
.sa-round .sa-round_7{
 -webkit-transform: rotate(180deg);
 -ms-transform:rotate(180deg);
 transform: rotate(180deg);
}
.sa-round .sa-round_8{
 -webkit-transform: rotate(210deg);
 -ms-transform:rotate(210deg);
 transform: rotate(210deg);
}
.sa-round .sa-round_9{
 -webkit-transform: rotate(240deg);
 -ms-transform:rotate(240deg);
 transform: rotate(240deg);
}
.sa-round .sa-round_10{
 -webkit-transform: rotate(270deg);
 -ms-transform:rotate(270deg);
 transform: rotate(270deg);
}
.sa-round .sa-round_11{
 -webkit-transform: rotate(300deg);
 -ms-transform:rotate(300deg);
 transform: rotate(300deg);
}
.sa-round .sa-round_12{
 -webkit-transform: rotate(330deg);
 -ms-transform:rotate(330deg);
 transform: rotate(330deg);
}

.sa-round .sa-round_2:before{
 -webkit-animation-delay: -1.1s;
 animation-delay: -1.1s;
}
.sa-round .sa-round_3:before{
 -webkit-animation-delay: -1.0s;
 animation-delay: -1.0s;
}
.sa-round .sa-round_4:before{
 -webkit-animation-delay: -0.9s;
 animation-delay: -0.9s;
}
.sa-round .sa-round_5:before{
 -webkit-animation-delay: -0.8s;
 animation-delay: -0.8s;
}
.sa-round .sa-round_6:before{
 -webkit-animation-delay: -0.7s;
 animation-delay: -0.7s;
}
.sa-round .sa-round_7:before{
 -webkit-animation-delay: -0.6s;
 animation-delay: -0.6s;
}
.sa-round .sa-round_8:before{
 -webkit-animation-delay: -0.5s;
 animation-delay: -0.5s;
}
.sa-round .sa-round_9:before{
 -webkit-animation-delay: -0.4s;
 animation-delay: -0.4s;
}
.sa-round .sa-round_10:before{
 -webkit-animation-delay: -0.3s;
 animation-delay: -0.3s;
}
.sa-round .sa-round_11:before{
 -webkit-animation-delay: -0.2s;
 animation-delay: -0.2s;
}
.sa-round .sa-round_12:before{
 -webkit-animation-delay: -0.1s;
 animation-delay: -0.1s;
}

@keyframes sa-roundBounceDelay {
 0%, 80%, 100%{
 -webkit-transform: scale(0);
 transform:scale(0);
 }
 40%{
 -webkit-transform:scale(1);
 transform: scale(1);
 }
}

@-webkit-keyframes sa-roundBounceDelay{
 0%, 80%, 100%{
 -webkit-transform:scale(0);
 transform: scale(0);
 }
 40%{
 -webkit-transform: scale(1);
 transform: scale(1);
 }
}
</style>
</head>
<body>
<div class="sa-round">
 <div class="sa-round_1 sa-child"></div>
 <div class="sa-round_2 sa-child"></div>
 <div class="sa-round_3 sa-child"></div>
 <div class="sa-round_4 sa-child"></div>
 <div class="sa-round_5 sa-child"></div>
 <div class="sa-round_6 sa-child"></div>
 <div class="sa-round_7 sa-child"></div>
 <div class="sa-round_8 sa-child"></div>
 <div class="sa-round_9 sa-child"></div>
 <div class="sa-round_10 sa-child"></div>
 <div class="sa-round_11 sa-child"></div>
 <div class="sa-round_12 sa-child"></div>
</div>
</body>
</html>

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest
Share via:

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts.

Leave a Reply