Introduction
In this article, we will see how to create a loading screen.
Step 1
The first step is to create an Index.html file and put the following code in it.
In the preceding HTML file, we have added three divs. In the last div we have added five divs. In these five divs we are loading text as content that will be displayed as an output.
But currently, if we view this Index.html in a browser, it will look like this.
Step 2
The next step is to add some styles and for that create a CSS file “container” and specify the CSS file address in the HTML file.
In the
container.css file write the following:
Refresh the page.
Our elements shifts 200px vertically and horizontally.
Set the padding-left to 70px.
Refresh the page.
Our container is now shifted 70px from the left.
Step 3
The next step is to add some CSS rules for the inner-container.
It will shift the elements more to the right and downward.
Step 4
The next step is to add some styles for our load div.
-
-
- .load > div{
-
- font-size: 20px;
-
-
- line-height: 90px;
-
-
- text-align: center;
-
-
- background-color: white;
-
-
- float: left;
-
-
- margin-left: 150px;
-
-
- width: 20px;
-
-
- opacity: 1.0;
-
-
- -webkit-transform: scale(0.8);
-
-
- -webkit-animation-name: load;
-
-
- -webkit-animation-duration: 1.20s;
-
-
- -webkit-animation-iteration-count: infinite;
- }
Refresh the page. The elements scale will reduce to 0.8. But no animation will happen.
Step 5
The next step is to add a keyframe with a named
load and we will bind this keyframe to the .load selector.
Since we have already bound this keyframe to the selector.
-
- -webkit-animation-name: load;
Refresh the page and you will see all the five loading contents. Now the animation is from a scale of 1.2 to 0.7 with an opacity of 1 to 0.1.
But all the contents animate at the same time. Now let's say we want each of the contents to animate one by one in a linear way and for that, we need to set an animation-delay for all the elements.
Step 6
Refresh the page and you will see the elements animate one after another.
So, we have learned how to create a simple loading screen using CSS but there are many more things you can do with this. So keep exploring.
I hope you like it. Thank you.