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