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>
  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. }
  13. @-webkit-keyframes spin {
  14. 0% { -webkit-transform: rotate(0deg); }
  15. 100% { -webkit-transform: rotate(360deg); }
  16. }
  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. }
  16. @-webkit-keyframes spin {
  17. 0% { -webkit-transform: rotate(0deg); }
  18. 100% { -webkit-transform: rotate(360deg); }
  19. }
  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.