Simple Loading Animation using HTML & CSS

Simple Loading Animation using HTML & CSS (Free Code)

Simple Loading Animation using HTML & CSS

In this article, you will learn how to create Simple Loading Animation using HTML and CSS. CSS loader spinner we use in different places. Basically, this type of animation can be seen while loading a web page. 

Many web pages open normally without any CSS spinner animation. However, in many cases, such simple animated loading can be seen. This type of loading is much more attractive and enhances user satisfaction. The loading animation that I have created here is absolutely simple and has been created using only HTML and CSS.

This is much more beautiful than the simple CSS loading spinner example. Because different colors and animations have been used here.

Simple Loading Animation CSS

Below is a preview that will help you learn how this animation works. If you only want the source code, you can use the download button at the bottom of the article.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, this is a simple animated loading animation. First, create a circular area on the webpage. A border has been used around that area. There is a kind of color animation in this border that enhances its beauty many times. A text called ‘loading’ is used in this circle.

To make it, you must have a basic idea about HTML and CSS. Here I have shared all the step-by-step tutorials and provided the required source code. I hope you will not have any difficulty in understanding.

Step 1: Basic structure of Loading Animation

The necessary information for this loading animation has been added using your own HTML code. Very little HTML code has been used. The background color of the web page is black.

<div class=”ring”>
  loading
  <span></span>
</div>
body{
margin: 0;
padding: 0;
background: #262626;
}
Basic structure of Loading Animation

Step 2: Basic Design of Loading Animation Area

Now the basic structure of this loading animation has been designed. Here the width of the round shape: 150px, height: 150px, and border-radius: 50% have been used to make it round. 

In addition, various box shadows have been used to enhance its beauty. Yellow color and shadow have been used in the text here.

.ring{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 150px;
height: 150px;
align-items: center;
line-height: 150px;
font-family: sans-serif;
font-size: 20px;
color: #fff000;
letter-spacing: 2px;
background: transparent;
border: 3px solid #3c3c3c;
border-radius: 50%;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 2px 10px #fff000;
box-shadow: 0 0 0 20px rgba(0,0,0,.5);
background: linear-gradient(0deg, #333, #000);
box-shadow: 0 0 0 4px  #353535,
0 0 0 5px #3e3e3e,
inset 0 0 10px rgba(0,0,0,1), 
0 5px 20px rgba(0,0,0,5), 
inset 0 0 15px rgba(0,0,0,.2);
}
Basic Design of Loading Animation Area

Step 3: Add Border Animation

Now this Simple Loading Animation has been implemented. Arrangements have been made to show a kind of border animation around this circle.

.ring:before{
content: ”;
position:absolute;
top: -3px;
left: -3px;
height: 100%;
width: 100%;
border: 3px solid transparent;
border-top: 3px solid #fff000;
border-right: 3px solid #fff000;
border-radius: 50%;
animation: animateCircle 2s linear infinite;
}
@keyframes animateCircle{
0%{
  transform: rotate(0deg);
}
100%{
  transform: rotate(360deg);
}
}
Add Border Animation

Step 4: Add a circle to Border Animation

Now I have added a small round point to that border animation. At this point, the border will continue to rotate like a border animation.

Width: 16px, height: 16px was used on that point and border-radius: 50% helped to round the point. The background color of this point is kept equal to the background color of the border animation.

span{
display: block;
position: absolute;
top: calc(50% – 2px);
left: 50%;
width: 50%;
background: transparent;
height: 4px;
transform-origin: left;
animation: animate 2s linear infinite;
}
span:before{
content: ”;
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff000;
top: -6px;
right: -8px;
box-shadow: 0 0 20px #fff000;
@keyframes animate{
0%{
  transform: rotate(45deg);
}
100%{
  transform: rotate(405deg);
}
}
Add a circle to Border Animation

Hopefully, you have learned from the above tutorial how this loading animation has been created using HTML and CSS. 

Earlier I shared with you the tutorials of different types of CSS spinners. If you want this Simple Loading Animation CSS source code then use the download button below.