How to Create Loading Spinner With CSS

Earlier, many web developers were using animated loading spinner .gifs. But CSS animations allow us to easily create a loading spinner.

We are going to show how to create a simple circle spinning around its center.

Create HTML

Create a <div> with a class name "spin" in the body section.

How to create HTML div element with a class name “spin”

<body>
  <div class="spin" aria-hidden="true"></div>
</body>

Add CSS

Create a circle setting the width and the height of it.
Set the border-radius to 50% to make it rounded.
Give color to the border.
Give color to the spinner with the border-bottom-color property.
Specify the animation, which has four values. The first value is the animation-duration which is 1.5s, meaning the length of time that animation takes to complete one cycle. The second value is the animation-timing-function which is set to linear meaning the animation has the same speed throughout the animation. We set the animation-iteration-count to infinite so that the animation plays endlessly. The final value is the animation-name.
Set the position to "absolute" so as to position the element relative to its closest positioned ancestor.
Specify the top and left positions of the spinner.
Define the transform translate3d, which is a 3D transform function used to move an element in 3D space. It translates the element by a vector [tx, ty, tz]: tx is the translation along the x-axis, ty is the translation along the y-axis, and tz is the translation along the z-axis. And define the rotate() function used to rotate an element in the 2D space.

How to style HTML element using CSS width, height, border-radius, border, border-bottom-color, animation, animation-duration, animation-play-state, position, transform, top and left properties ?

.spin::before {
  animation: 1.5s linear infinite spinner;
  animation-play-state: inherit;
  border: solid 5px #cfd0d1;
  border-bottom-color: #1c87c9;
  border-radius: 50%;
  content: "";
  height: 40px;
  position: absolute;
  top: 10%;
  left: 10%;
  transform: translate3d(-50%, -50%, 0);
  width: 40px;
  will-change: transform;
}

Here’s the final result of our code.

Example of creating a loading spinner:

An example of how to create loading spinner using CSS ::before pseudo-element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes spinner {
        0% {
          transform: translate3d(-50%, -50%, 0) rotate(0deg);
        }
        100% {
          transform: translate3d(-50%, -50%, 0) rotate(360deg);
        }
      }
      .spin::before {
        animation: 1.5s linear infinite spinner;
        animation-play-state: inherit;
        border: solid 5px #cfd0d1;
        border-bottom-color: #1c87c9;
        border-radius: 50%;
        content: "";
        height: 40px;
        width: 40px;
        position: absolute;
        top: 10%;
        left: 10%;
        transform: translate3d(-50%, -50%, 0);
        will-change: transform;
      }
    </style>
  </head>
  <body>
    <div class="spin" aria-hidden="true"></div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo not-prose"> XFI6 </div> </div> ### Example of creating a loading spinner with the "ease-in-out" value:

An example of how to create loading spinner with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin-top: 100px;
        background-color: #0042A4;
        color: #fff;
        text-align: center;
      }
      h1 {
        font: 1.5em 'Roboto', sans-serif;
        margin-bottom: 30px;
      }
      .spin {
        display: inline-block;
        width: 50px;
        height: 50px;
        border: 3px solid rgba(255, 255, 255, .3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s ease-in-out infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <h1>Loading Spinner</h1>
    <div class="spin" aria-hidden="true"></div>
  </body>
</html>

Try it Yourself »

Example of creating a loading spinner with the "linear" value:

An example of multicolor loading spinner with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .spin {
        border: 16px solid #0042A4;
        border-radius: 50%;
        border-top: 16px solid #3775CF;
        border-right: 16px solid #619BEE;
        border-bottom: 16px solid #96BFF9;
        border-left: 16px solid #C9E0FF;
        width: 50px;
        height: 50px;
        animation: spin 1.5s linear infinite;
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="spin" aria-hidden="true"></div>
  </body>
</html>

Try it Yourself »

Example of creating a loading spinner with the "cubic-bezier" value:

A cool example of multicolor loading spinner with only CSS and a text inside it

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body,
      html {
        background: #002F74;
      }
      .spin-container {
        text-align: center;
        margin-top: 100px;
        position: relative;
        height: 250px;
      }
      .spin, #loader2, #loader3, #loader4 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-left-color: transparent;
        border-right-color: transparent;
        animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
      }
      #loader2 { animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite; }
      #loader3 { animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite; }
      #loader4 { animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite; }
      @keyframes rotate {
        0% {
          transform: rotateZ(-360deg)
        }
        100% {
          transform: rotateZ(0deg)
        }
      }
      @keyframes rotate2 {
        0% {
          transform: rotateZ(360deg)
        }
        100% {
          transform: rotateZ(0deg)
        }
      }
      #text {
        color: #D6E3F6;
        font-family: Arial;
        font-size: 15px;
        position: relative;
        top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="spin-container">
      <div class="spin" id="loader" aria-hidden="true"></div>
      <div class="spin" id="loader2" aria-hidden="true"></div>
      <div class="spin" id="loader3" aria-hidden="true"></div>
      <div class="spin" id="loader4" aria-hidden="true"></div>
      <span id="text">LOADING...</span>
    </div>
  </body>
</html>

Try it Yourself »