Introduction
In this article I am going to explain how to create page loader using CSS step by step.
A page loader is any quite animation that visually communicates to a visitant that the page is loading and to simply remain for a couple of seconds. ... it's the previous situation wherever a CSS page loader will work okay.
Implementation
Step 1
Create HTML Structure as following.
- <html>
- <head>
- <title>CSS Page Loader Example</title>
- </head>
- <body>
-
- </body>
- </html>
Step2
Write CSS For Page Loader within <style> tag as following
- <style>
- .loader {
- border: 16px solid #f3f3f3;
- border-radius: 50%;
- border-top: 16px solid #0087FF;
- border-bottom: 16px solid #FF6100;
- width: 120px;
- height: 120px;
- -webkit-animation: spin 2s linear infinite;
- animation: spin 2s linear infinite;
- }
-
- @-webkit-keyframes spin {
- 0% { -webkit-transform: rotate(0deg); }
- 100% { -webkit-transform: rotate(360deg); }
- }
-
- @keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
- }
- </style>
Step 3
Put <style>this tag within </head>tag.
Step 4
Now, add division tag (<div>) within <body> tag. And apply created CSS class.
- <body>
- <div class="loader"> </div>
- </body>
Full Code
- <html>
- <head>
- <title>CSS Page Loader Example</title>
- <style>
- .loader {
- border: 16px solid #f3f3f3;
- border-radius: 50%;
- border-top: 16px solid #0087FF;
- border-bottom: 16px solid #FF6100;
- width: 120px;
- height: 120px;
- -webkit-animation: spin 2s linear infinite;
- animation: spin 2s linear infinite;
- }
-
- @-webkit-keyframes spin {
- 0% { -webkit-transform: rotate(0deg); }
- 100% { -webkit-transform: rotate(360deg); }
- }
-
- @keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
- }
- </style>
- </head>
- <body>
- <div class="loader"> </div>
- </body>
- </html>
Explanation
The border property used to display the size of border and also the color of border within loader. The border-radius property is used to transforms the loader into a rounded circle.
The blue issue that spins around within the border is such with the border-top property. You’ll additionally embody border-bottom, border-left and/or border-right if you would like additional "spinners" (see example below).
The size of the loader is such with the breadth and height properties.
At last, we have a tendency to add Associate in Nursing animation that produces the blue issue spin forever with a pair of second animation speed.
Note
You ought to additionally embody a -webkit- prefix for browsers that don't support animation and rework properties. Click on the instance to check however.
Output Screen
![Output Screen]()
Summary
A page loader is any quite animation that visually communicates to a visitant that the page is loading and to simply remain for a couple of seconds. It’s the previous situation wherever a CSS page loader will work okay.
I hope this article will helpful to beginner.