CSS - Loaders

CSS loaders are animation effects that are used to indicate the loading process of a webpage. They are implemented using CSS and can be applied to various elements on a webpage, such as a spinner or a progress bar. CSS loaders are commonly used to improve user experience by visually indicating that content is being loaded or processed.

Following properties of CSS are few which can be used to create a loader:

  • border: Used in specifying the size and color of the border of the loader.

  • border-radius: Used in specifying the shape of the loader. For example: border-radius:50% makes the loader a circle.

  • border-top, border-bottom, border-left and/or border-right: Used to indicate the direction from which the loader should spin.

  • width: Used to specify the width of the loader.

  • height: Used to specify the height of the loader.

  • animation: Used to specify the time taken to spin, by the loader.

  • @keyframes: @keyframes rule is used to specify the animation rule. It can contain the keywords such as from and to, which means 0% and 100% respectively; where 0% is beginning of the animation and 100% is completion of it.

  • transform: The function transform is used to specify the rotational degree for the loader.

  • mask / mask-composite: Used in creating a final shape of the loader.

You need to add the -webkit- prefix in your code for the browsers that do not support the animation and transform properties.

Creating Loader

To create a loader using CSS, follow these steps:

  • Create a div element for displaying the loader.

  • Use CSS styling for the loader, declare a class for it say for example class .demo-loader.

  • Set the width and height of the loader.

  • Set the border, border-radius or individual side borders of the loader.

  • Set the animation rule for the loader, using the @keyframes rule.

  • Use the prefix -webkit for the browsers that don't support the animation and transform properties.

  • Call this class (.demo-loader) in your div element within the body tag.

You may use various colour combinations, shape, patterns and animation tricks for the loader. Play around with CSS properties to create your loader.

There are innumerable kinds of loaders that can be created using CSS. In the following section we see few examples.

CSS Loaders - Basic Example

Following example demonstartes creating a loader using CSS as discussed in the previous section:

<html>
<head>
<style>
   .loader-test {
      border: 20px solid #110101;
      border-radius: 60%;
      border-top: 20px solid #f10c18;
      border-right: 20px solid yellow;
      border-bottom: 20px solid blue;
      border-left: 20px solid green;
      width: 50px;
      height: 50px;
      -webkit-animation: spin 5s linear infinite;
      animation: spin 5s linear infinite;
   }
   @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
   }
</style>
</head>
<body>
   <h2>CSS Loader</h2>
   <div class="loader-test"></div>
</body>
</html>

CSS Loaders - With border-right Property

Following example demonstartes creating a loader using using just one border shorthand property border-right:

<html>
<head>
<style>
   .loader-test {
      border: 20px solid #110101;
      border-radius: 60%;
      border-right: 20px solid red;
      width: 50px;
      height: 50px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
   }
   @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
   }
</style>
</head>
<body>
   <h2>CSS Loader</h2>
   <div class="loader-test"></div>
</body>
</html>

CSS Loaders - With :before and :after

Following example demonstartes creating a loader using pseudo elements such as :before and :after:

<html>
<head>
<style>
   .loader-test {
      width: 100px; /* control the size */
      aspect-ratio: 1;
      -webkit-mask: conic-gradient(red, yellow, green);
      mask: conic-gradient(red, yellow, green);
      animation: spin 2s steps(12) infinite;
   }
   .loader-test,
   .loader-test:before,
   .loader-test:after{
      background: conic-gradient(red, yellow, green);
   }
   .loader-test:before,
   .loader-test:after{
      content: "";
      transform: rotate(30deg);
   }
   .loader-test:after{
      transform: rotate(60deg);
   }
   @keyframes spin {
      from {transform: rotate(0turn)}
      to   {transform: rotate(1turn)}
   }
   div {
      margin: 20px;
      width: 100px;
      height: 100px;
      place-content: center;
      place-items: center;
   }
</style>
</head>
<body>
   <h2>CSS Loader</h2>
   <div class="loader-test">
</div>
</body>
</html>

Always specify both the 0% and the 100% selectors, for best browser support.

CSS Loaders - With linear-gradient

Here is another example of creating a loader:

<html>
<head>
<style>
   .loader-test {
      width: 50px;
      height: 50px;
      padding: 10px;
      aspect-ratio: 1;
      border-radius: 50%;
      margin: 20px;       
      background: linear-gradient(10deg,#ccc,red);
      -webkit-mask: conic-gradient(#0000,#000), linear-gradient(#000 0 0) content-box;
      mask: conic-gradient(#0000,#000), linear-gradient(#000 0 0) content-box;
      -webkit-mask-composite: source-out;
      mask-composite: subtract;
      animation: load 1s linear infinite;
   }
   @keyframes load {
      to{transform: rotate(1turn)}
   }
</style>
</head>
<body>
   <h2>CSS Loader</h2>
   <div class="loader-test"></div>
</body>
</html>
Advertisements