Mandala   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +{ { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }      ../../    ../../    ../../    ../../    ../../    ../../    ../../ <></><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </>

How To Create a Page Loader Using HTML and CSS

This tutorial demonstrates creating a simple circular page loader using CSS and HTML. Included are page loader code walk-throughs and examples.

Don’t worry whether you are new to CSS or want to make your website more user-friendly by using a loading animation. This article will teach you how to create two simple page loaders and walk you through the process of adding them to your page.

What Is a Page Loader in CSS?

A page loader is a user interface element that informs users that a website is currently processing data and has not crashed. While a page loads, visitors are entertained by exciting animations. Common loading examples include blinking circles or moving stripes reflecting that a page is loading additional data.

What Is the Benefit of a Page Loader?

Unlike a GIF, PNG, JPEG, or any other image format used for animation or design, a CSS page loader animation does not need to make a network request. As a result, there may be reduced resource bandwidth, resulting in quicker page loading.

Creating a Page Loader

An Animated Red CSS Spinner and Loader
An Animated Red CSS Spinner and Loader

First, you need to create a basic HTML structure to outline the parts for a loader. An HTML structure is a shell where we can start placing the necessary items (HTML markup elements). Here is an example HTML shell.

<!DOCTYPE html>
<html>
   <head>
      <title>Page Loader</title>
   </head>
   <body>  
   </body>
</html>

Then, in the <body> tag, include a <div> element with a .ring class. The class will be used to animate and style a page loader using CSS styles.

<body>
   <div class="ring"> </div>
</body>

Now we need to add the CSS properties for .ring class to the <style> tag.

.ring {
  border: 20px solid rgb(211, 211, 211);
  position: absolute;
  left: 45%;
  border-radius: 50%;
  border-top: 20px solid red;
  width: 120px;
  height: 120px;
  animation: spin 1s linear infinite;
}

Explaining the CSS Properties

  • border: The border property is used to set the size and color of the edge of a page loader.
  • border-radius: The border-radius property defines the radius of an element’s corners. We have used it to transform our page loader into a circular ring.
  • border-<position>: The spinner colors are made up of an edge created with the border-top property. You can also use border-bottomborder-left, or border-right instead of border-top (as it will only change the initiating color position of a spinner).
  • height: The height loader is specified using a height property.
  • width: The width of a loader is determined by the value of the width property.
  • animation: An essential feature in the styles we will use is the animation property to control the animation of a loader. Below, an animation name and time duration are written as an animation property value, making the spinner spin with a 1-second speed while using a keyframe with the name “spin”.
animation: spin 1s linear infinite;

Using @keyframes Rules

If you try to execute this code, it will not move because we still need to add the necessary keyframe rules (animation rules). Keyframes can be defined using a @keyframes keyword within a stylesheet, containing the logic required to run an animation. Specify animation steps using a percent (n%) or with two keywords, “from” and “to.”

The example below creates an animation by gradually changing from one set of CSS styles to another. First, we define a keyframe animation with the name “spin.” Next, we use a transform: rotate property which rotates the object from 0deg to 360degs.

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Note: The transform property is used to create an element’s 2D/3D transformation. In simple words, you can use it to move, rotate or scale your elements along the X, Y, and Z-axis, respectively.

Next, we need to add the keyframe rule style we defined above after the .ring class in the HTML below. Below is the complete code implementation of a page loader.

<!DOCTYPE html>
<html>
   <head>
      <title>Page Loader</title>
      <style>
        h1 {
          text-align: center;
        }
        .ring {
          border: 20px solid rgb(211, 211, 211);
          position: absolute;
          left: 45%;
          border-radius: 50%;
          border-top: 20px solid red;
          width: 120px;
          height: 120px;
          animation: spin 1s linear infinite;
        }
        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      </style>
   </head>
   <body>
      <h1>Please wait...</h1>
      <div class="ring"> </div>
   </body>
</html>

Styling a Page Loader

An Animated Multi-colored CSS Spinner and Loader
An Animated Multi-colored CSS Spinner and Loader

You are not limited to creating only a single-color loader; multi-colored loaders can be made too! We can also demonstrate how to add more style so let’s add more color to this loader.

Adding additional colors can be done by using a border property. Previously, the color red was added using a border-top property inside the .ring class. To add color to the other parts inside a loader, we should include the border-bottomborder-left, and border-right properties.

Inside the <style> tag within the .ring class, add the following CSS border properties.

border-bottom: 20px solid #4285f4; /* blue */
border-right: 20px solid #fbbc05; /* yellow */
border-left:20px solid #34a853; /* green */

We will also update the red to a hex color, #eb4335;.

border-top: 20px solid #eb4335; /* red */

The complete code for a loader with multiple colors is written below.

<!DOCTYPE html>
<html>
   <head>
      <title>Page Loader</title>
      <style>
          h1 {
            text-align: center;
          }
          .ring {
            border: 20px solid rgb(211, 211, 211);
            position: absolute;
            left: 45%;
            border-radius: 50%;
            border-top: 20px solid #eb4335; /* red */
            border-bottom: 20px solid #4285f4; /* blue */
            border-right: 20px solid #fbbc05; /* yellow */
            border-left:20px solid #34a853; /* green */
            width: 120px;
            height: 120px;
            animation: spin 1s linear infinite;
          }
          @keyframes spin {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
      </style>
   </head>
   <body>
      <h1>Please wait...</h1>
      <div class="ring"> </div>
   </body>
</html>

Creating Multiple Page Loaders

Multiple Animated Colored CSS Spinners and Loaders
Multiple Animated Colored CSS Spinners and Loaders

You can even use multiple page loaders. Let’s walk-through through how to accomplish adding a second-page loader. We will use two circular loaders in the above image to give a practical demonstration.

To add a second loader, you must create another class for a second-page loader and then change the original loader’s class name. We will use .ring1 class name for the first loader and .ring2 for the second-page loader.

<!DOCTYPE html>
<html>
   <head>
      <title>Page Loader</title>
      <style>
          h1 {
            text-align: center;
          }
          .ring1 {
            border: 20px solid rgb(211, 211, 211);
            position: absolute;
            left: 35%;
            border-radius: 50%;
            border-top: 20px solid red;
            width: 120px;
            height: 120px;
            animation: spin 1s linear infinite;
          }
          .ring2 {
            border: 20px solid rgb(211, 211, 211);
            position: absolute;
            left: 55%;
            border-radius: 50%;
            border-top: 20px solid #eb4335; /* red */
            border-bottom: 20px solid #4285f4; /* blue */
            border-right: 20px solid #fbbc05; /* yellow */
            border-left:20px solid #34a853; /* green */
            width: 120px;
            height: 120px;
            animation: spin 1s linear infinite;
          }
          @keyframes spin {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
      </style>
   </head>
   <body>
      <h1>Please wait...</h1>
      <div class="ring1"> </div>
      <div class="ring2"> </div>
   </body>
</html>

Extended Example

You can check out this enhanced version on codepen.io.

Conclusion

This article assisted you in creating a page loader. A page loader helps make your site more engaging and keeps the visitors entertained by showing them animations during application load times. CSS animated loaders can reduce a website’s resources in a browser because they do not require a network request to fulfill their function, unlike a GIF or other similar image format.

Similar Articles

Recommended Articles