CSS loader

by Online Tutorials Library July 14, 2022

CSS Loader

A loader is said to be any animation that alerts the visitor about the page is loading, and you have to wait for a few seconds. It is helpful when a page took some seconds to load the webpage content. Without using the loader on the webpage, the visitor might think that the site is unresponsive.

Using the CSS loader makes the visitor distracted or waited for some time until the page gets fully loaded.

We can understand the concept of CSS loader by using the following illustrations.

Example1

  <!DOCTYPE html>   <html>       <head>       <title>css loader</title>       <style>           h1{               color:red;           }           div{               display: block;               position: absolute;               width: 10px;               height: 10px;               left: calc(50% – 1em);               border-radius: 1em;               transform-origin: 1em 2em;               animation: rotate;               animation-iteration-count: infinite;               animation-duration: 1.6s;           }                @keyframes rotate {                 0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); }           }           .d1 {               animation-delay: 0.1s;               background-color: blue;           }           .d2 {               animation-delay: 0.2s;               background-color: red;           }           .d3 {               animation-delay: 0.3s;               background-color: yellow;           }           .d4 {               animation-delay: 0.4s;               background-color: green;           }           .d5 {               animation-delay: 0.5s;               background-color: magenta;           }       </style>   </head>   <body>       <center>            <h1>CSS Loader</h1>                         <div class=’d1′></div>               <div class=’d2′></div>               <div class=’d3′></div>               <div class=’d4′></div>               <div class=’d5′></div>               </center>   </body>       </html>  

Test it Now

Let’s see another example of the loader in which we are going to create a spinner.

Example2

  <!DOCTYPE html>  <html>  <head>  <style>  h1{  text-align:center;  }  .loader {    border: 20px solid #f3f3f3;    position:absolute;    left:43%;    border-radius: 50%;    border-top: 20px solid purple;    width: 150px;    height: 150px;    animation: spin 2s linear infinite;  }  @keyframes spin {    0% { transform: rotate(0deg); }    100% { transform: rotate(360deg); }  }  </style>  </head>  <body>    <h1>CSS Loader</h1>    <div class=”loader”></div>    </body>  </html>  

Test it Now

In the above example, we have defined the border property, which specifies the border color and border size of the loader. Here, we have also used the border-radius property, which transforms the border into the circle.

We have used the border-top property for the purple thing that spins around within the border. The loader size is defined by using the width and height properties. In the end, we have added an animation which makes the purple thing spin countless times with an animation speed of 2s.

Another example of more loaders is given below.

Example3

In the above example, we have only included the border-top property, but in this example, we also include the border-bottom, border-left, and border-right properties.

Let’s see how it works.

  <!DOCTYPE html>  <html>  <head>  <style>  h1{  text-align:center;  }  .loader {    border: 20px solid #f3f3f3;    position:absolute;    border-radius: 50%;    border-top: 20px solid purple;    border-bottom: 20px solid purple;    width: 150px;    height: 150px;    animation: spin 2s linear infinite;  }  .loader1 {    border: 20px solid #f3f3f3;    position:absolute;    left:43%;    border-radius: 50%;    border-top: 20px solid purple;    border-bottom: 20px solid green;    border-right: 20px solid red;    width: 150px;    height: 150px;    animation: spin 2s linear infinite;  }    .loader2 {    border: 20px solid #f3f3f3;    position:absolute;    left:80%;    border-radius: 50%;    border-top: 20px solid purple;    border-bottom: 20px solid green;    border-right: 20px solid red;    border-left:20px solid orange;    width: 150px;    height: 150px;    animation: spin 2s linear infinite;  }  @keyframes spin {    0% { transform: rotate(0deg); }    100% { transform: rotate(360deg); }  }  </style>  </head>  <body>    <h1>CSS Loader</h1>    <div class=”loader”></div>  <div class=”loader1″></div>  <div class=”loader2″></div>  </body>  </html>  

Test it Now

Next TopicCSS units

CSS loader

CSS Loader

Example1

Example2

Example3

Sum of Digits Program in C++

CSS minify

You may also like