w3docs logo
  1. Snippets
  2. CSS
  3. How to Create Loading Spinner With CSS

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.
<body>
  <div class="spin"></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.
.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:

<!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"></div>
  </body>
</html>

Result

Example of creating a loading spinner with the "ease-in-out" value:

<!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;
        -webkit-animation: spin 1s ease-in-out infinite;
      }
      @keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
        }
      }
      @-webkit-keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <h1>Loading Spinner</h1>
    <div class="spin"></div>
  </body>
</html>

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

<!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;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
      }
      @-webkit-keyframes spin {
        0% {
          -webkit-transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
        }
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="spin"></div>
  </body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body,
      html {
        background: #002F74;
      }
      .spin-container {
        text-align: center;
        margin-top: 100px;
      }
      .spin {
        border: 3px solid #0D4B9F;
        width: 200px;
        height: 200px;
        margin: 0 auto;
        border-radius: 50%;
        border-left-color: transparent;
        border-right-color: transparent;
        animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
      }
      #loader2 {
        border: 3px solid #E0EDFF;
        width: 220px;
        height: 220px;
        position: relative;
        top: -216px;
        border-left-color: transparent;
        border-right-color: transparent;
        animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
      }
      #loader3 {
        border: 3px solid #005CDC;
        width: 240px;
        height: 240px;
        position: relative;
        top: -452px;
        border-left-color: transparent;
        border-right-color: transparent;
        animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
      }
      #loader4 {
        border: 3px solid #94B6E5;
        width: 260px;
        height: 260px;
        position: relative;
        top: -708px;
        border-left-color: transparent;
        border-right-color: transparent;
        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: -857px;
      }
    </style>
  </head>
  <body>
    <div class="spin-container">
      <div class="spin" id="loader"></div>
      <div class="spin" id="loader2"></div>
      <div class="spin" id="loader3"></div>
      <div class="spin" id="loader4"></div>
      <span id="text">LOADING...</span>
    </div>
  </body>
</html>
Do you find this helpful?