Pure CSS Circular Loading Spinner

Hi friend in this tutorial, I show you how to create CSS loading spinner. Now that optimizing web pages for large displays and portable devices becomes more important, you get tons of web pages offering CSS loading spinners. Sadly many of them are hold heavy and require you to add elements to your page in order to build them. I find it very convenient to simply add a class to the element in that I like to show a spinner.

loading_model_11.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Loading_model_11</title>
<style>
body{
 background-color: #2e2a31;
}
.loading{
 position: absolute;
 left: 50%;
 top:50%;
 margin: -60px 0 0 -60px;
 background-color:#ff731a;
 width:100px;
 height:100px;
 border-radius:100%;
 border: 10px solid #FFF;
}
.loading:after{
 content: '';
 background:trasparent;
 width:140%;
 height:140%;
 position:absolute;
 border-radius: 100%;
 top: -20%;
 left: -20%;
 opacity: 0.7;
 box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
 animation: rotate 2s infinite linear;
}
@keyframes rotate{
 0%{
 transform: rotateZ(0deg);
 }
 100%{
 transform: rotateZ(360deg);
 }
}
</style>
</head>
<body>
<div class="loading"></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