How To Create Page Loader Using CSS

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.

  1. <html>  
  2. <head>  
  3.     <title>CSS Page Loader Example</title>  
  4. </head>  
  5. <body>  
  6.   
  7. </body>  
  8. </html>  

Step2

Write CSS For Page Loader within <style> tag as following

  1. <style>  
  2.         .loader {  
  3.                     border: 16px solid #f3f3f3;  
  4.                     border-radius: 50%;  
  5.                     border-top: 16px solid #0087FF;  
  6.                     border-bottom: 16px solid #FF6100;  
  7.                     width: 120px;  
  8.                     height: 120px;  
  9.                     -webkit-animation: spin 2s linear infinite;  
  10.                     animation: spin 2s linear infinite;  
  11.                 }  
  12.   
  13.         @-webkit-keyframes spin {  
  14.             0% { -webkit-transform: rotate(0deg); }  
  15.             100% { -webkit-transform: rotate(360deg); }  
  16.         }  
  17.   
  18.         @keyframes spin {  
  19.             0% { transform: rotate(0deg); }  
  20.             100% { transform: rotate(360deg); }  
  21.         }  
  22. </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.

  1. <body>  
  2.     <div class="loader"> </div>  
  3. </body>   

Full Code

  1. <html>  
  2. <head>  
  3.     <title>CSS Page Loader Example</title>  
  4.     <style>  
  5.         .loader {  
  6.                     border: 16px solid #f3f3f3;  
  7.                     border-radius: 50%;  
  8.                     border-top: 16px solid #0087FF;  
  9.                     border-bottom: 16px solid #FF6100;  
  10.                     width: 120px;  
  11.                     height: 120px;  
  12.                     -webkit-animation: spin 2s linear infinite;  
  13.                     animation: spin 2s linear infinite;  
  14.                 }  
  15.   
  16.         @-webkit-keyframes spin {  
  17.             0% { -webkit-transform: rotate(0deg); }  
  18.             100% { -webkit-transform: rotate(360deg); }  
  19.         }  
  20.   
  21.         @keyframes spin {  
  22.             0% { transform: rotate(0deg); }  
  23.             100% { transform: rotate(360deg); }  
  24.         }  
  25.     </style>  
  26. </head>  
  27. <body>  
  28.     <div class="loader"> </div>  
  29. </body>  
  30. </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.