Create an Animated Spinner Using HTML and CSS

To create Animated Spinner, you first need to understand the exact requirements for your website or App.

In this post, we will add top three important animation design layout for spinner using Plain HTML, JS and CSS3 which can be used on most of the Apps, Webpage Layout with simple tweaks.

First Design to create Animated Spinner: Simple SVG Loading Spinners

First we need to create HTML web page and Static HTML Layout to add CSS & SVG.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Spinner</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>

Next Step is to select SVG which we will need to add Spinner.

<!--Element for custom SVG spinner-->
  <svg id="svg-spinner" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <circle cx="24" cy="4" r="4" fill="#fff"/>
  <circle cx="12.19" cy="7.86" r="3.7" fill="#fffbf2"/>
  <circle cx="5.02" cy="17.68" r="3.4" fill="#fef7e4"/>
  <circle cx="5.02" cy="30.32" r="3.1" fill="#fef3d7"/>
  <circle cx="12.19" cy="40.14" r="2.8" fill="#feefc9"/>
  <circle cx="24" cy="44" r="2.5" fill="#feebbc"/>
  <circle cx="35.81" cy="40.14" r="2.2" fill="#fde7af"/>
  <circle cx="42.98" cy="30.32" r="1.9" fill="#fde3a1"/>
  <circle cx="42.98" cy="17.68" r="1.6" fill="#fddf94"/>
  <circle cx="35.81" cy="7.86" r="1.3" fill="#fcdb86"/>
</svg>

Checkout Final HTML Layout for SVG Spinner. You can easily use different SVGs or customize current one and use with same CSS to create different effects as per your requirements!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML CSS Loding Spinner</title>
</head>
<body>
  <div id="container">    
    <!--Element for custom SVG spinner-->
    <svg id="svg-spinner" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
      <circle cx="24" cy="4" r="4" fill="#fff" />
      <circle cx="12.19" cy="7.86" r="3.7" fill="#fffbf2" />
      <circle cx="5.02" cy="17.68" r="3.4" fill="#fef7e4" />
      <circle cx="5.02" cy="30.32" r="3.1" fill="#fef3d7" />
      <circle cx="12.19" cy="40.14" r="2.8" fill="#feefc9" />
      <circle cx="24" cy="44" r="2.5" fill="#feebbc" />
      <circle cx="35.81" cy="40.14" r="2.2" fill="#fde7af" />
      <circle cx="42.98" cy="30.32" r="1.9" fill="#fde3a1" />
      <circle cx="42.98" cy="17.68" r="1.6" fill="#fddf94" />
      <circle cx="35.81" cy="7.86" r="1.3" fill="#fcdb86" />
    </svg>
    <p id="svg-para">Spinner created with custom SVG and CSS Animation</p>
  </div>
  </div>
</body>
</html>

Let’s add CSS to complete the cross browser compatible Design.

#svg-spinner{
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1.2s;
  -webkit-animation-name: rotate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  
  -moz-transition-property: -moz-transform;
  -moz-animation-name: rotate; 
  -moz-animation-duration: 1.2s; 
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  
  transition-property: transform;
  animation-name: rotate; 
  animation-duration: 1.2s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}


/* Rest of page style*/
body{
  background:#FABC20;
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  color:#393D3D;
}

#container{
  width:90%;
  max-width:700px;
  margin:1em auto;
  position:relative;
}

/* spinner positioning */

#svg-spinner{
  position:absolute;
  left:75%; 
  top:80px;
  margin-left:-24px;
}

#svg-para{
  position:absolute;
  top:100px;
  width:40%;
  padding:5%;
  left:50%;
  text-align:center;
}

Here is the Final Code with working SVG spinner.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Spinner</title>
  <style>
    #svg-spinner {
      -webkit-transition-property: -webkit-transform;
      -webkit-transition-duration: 1.2s;
      -webkit-animation-name: rotate;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;

      -moz-transition-property: -moz-transform;
      -moz-animation-name: rotate;
      -moz-animation-duration: 1.2s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;

      transition-property: transform;
      animation-name: rotate;
      animation-duration: 1.2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    @-webkit-keyframes rotate {
      from {
        -webkit-transform: rotate(0deg);
      }

      to {
        -webkit-transform: rotate(360deg);
      }
    }

    @-moz-keyframes rotate {
      from {
        -moz-transform: rotate(0deg);
      }

      to {
        -moz-transform: rotate(360deg);
      }
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }


    /* Rest of page style*/
    body {
      background: #FABC20;
      font-family: 'Open Sans', sans-serif;
      -webkit-font-smoothing: antialiased;
      color: #393D3D;
    }

    #container {
      width: 90%;
      max-width: 700px;
      margin: 1em auto;
      position: relative;
    }

    /* spinner positioning */

    #svg-spinner {
      position: absolute;
      top: 80px;
      margin-left: -24px;
    }



    #svg-spinner {
      left: 75%;
    }

    #svg-para {
      position: absolute;
      top: 100px;
      width: 40%;
      padding: 5%;
      text-align: center;
    }

    #svg-para {
      left: 50%;
    }
  </style>
</head>

<body>
  <div id="container">
  <!--Element for custom SVG spinner-->
    <svg id="svg-spinner" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
      <circle cx="24" cy="4" r="4" fill="#fff" />
      <circle cx="12.19" cy="7.86" r="3.7" fill="#fffbf2" />
      <circle cx="5.02" cy="17.68" r="3.4" fill="#fef7e4" />
      <circle cx="5.02" cy="30.32" r="3.1" fill="#fef3d7" />
      <circle cx="12.19" cy="40.14" r="2.8" fill="#feefc9" />
      <circle cx="24" cy="44" r="2.5" fill="#feebbc" />
      <circle cx="35.81" cy="40.14" r="2.2" fill="#fde7af" />
      <circle cx="42.98" cy="30.32" r="1.9" fill="#fde3a1" />
      <circle cx="42.98" cy="17.68" r="1.6" fill="#fddf94" />
      <circle cx="35.81" cy="7.86" r="1.3" fill="#fcdb86" />
    </svg>
    <p id="svg-para">Spinner created with custom SVG and CSS Animation</p>
  </div>
  </div>
</body>
</html>

Second Design to create Animated Spinner: Simple HTML Loading Spinner

Instead of adding SVG, now we will use only HTML and CSS to create loading spinner. Here is the semantic HTML Layout which we will need to add design to it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Spinner</title> 
</head>
<body>
  <div id="container">
    <!--Element for spinner made with HTML + CSS-->
    <div id="html-spinner"></div>
    <p id="html-para">Spinner created with only HTML and CSS</p>
    </div>
  </div>
</body>
</html>

Now, we will add CSS which will give animation effect to the spinner.

#html-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #fcd779;
      border-top: 4px solid white;
      border-radius: 50%;
    }

    #html-spinner {
      -webkit-transition-property: -webkit-transform;
      -webkit-transition-duration: 1.2s;
      -webkit-animation-name: rotate;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;

      -moz-transition-property: -moz-transform;
      -moz-animation-name: rotate;
      -moz-animation-duration: 1.2s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;

      transition-property: transform;
      animation-name: rotate;
      animation-duration: 1.2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    @-webkit-keyframes rotate {
      from {
        -webkit-transform: rotate(0deg);
      }

      to {
        -webkit-transform: rotate(360deg);
      }
    }

    @-moz-keyframes rotate {
      from {
        -moz-transform: rotate(0deg);
      }

      to {
        -moz-transform: rotate(360deg);
      }
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }


    /* Rest of page style*/
    body {
      background: #FABC20;
      font-family: 'Open Sans', sans-serif;
      -webkit-font-smoothing: antialiased;
      color: #393D3D;
    }

    #container {
      width: 90%;
      max-width: 700px;
      margin: 1em auto;
      position: relative;
    }

    /* spinner positioning */

    #html-spinner {
      position: absolute;
      left: 25%;
      top: 80px;
      margin-left: -24px;
    }


    #html-para {
      position: absolute;
      top: 100px;
      width: 40%;
      padding: 5%;
      text-align: center;
    }

Lastly, Checkout the Final working Layout with Simple HTML and CSS! Before we have added SVG and now only CSS. Generally, we should use Only CSS design if possible.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Spinner</title>
  <style>
    #html-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #fcd779;
      border-top: 4px solid white;
      border-radius: 50%;
    }

    #html-spinner {
      -webkit-transition-property: -webkit-transform;
      -webkit-transition-duration: 1.2s;
      -webkit-animation-name: rotate;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;

      -moz-transition-property: -moz-transform;
      -moz-animation-name: rotate;
      -moz-animation-duration: 1.2s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;

      transition-property: transform;
      animation-name: rotate;
      animation-duration: 1.2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    @-webkit-keyframes rotate {
      from {
        -webkit-transform: rotate(0deg);
      }

      to {
        -webkit-transform: rotate(360deg);
      }
    }

    @-moz-keyframes rotate {
      from {
        -moz-transform: rotate(0deg);
      }

      to {
        -moz-transform: rotate(360deg);
      }
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }


    /* Rest of page style*/
    body {
      background: #FABC20;
      font-family: 'Open Sans', sans-serif;
      -webkit-font-smoothing: antialiased;
      color: #393D3D;
    }

    #container {
      width: 90%;
      max-width: 700px;
      margin: 1em auto;
      position: relative;
    }

    /* spinner positioning */

    #html-spinner {
      position: absolute;
      left: 25%;
      top: 80px;
      margin-left: -24px;
    }


    #html-para {
      position: absolute;
      top: 100px;
      width: 40%;
      padding: 5%;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="container">
    <!--Element for spinner made with HTML + CSS-->
    <div id="html-spinner"></div>
    <p id="html-para">Spinner created with only HTML and CSS</p>
  </div>
  </div>
</body>

</html>

Additionally, you should select the approach as per your design requirements and make it consistently across the app. Definitely, both approaches are great options as it requires minimal implementations and works cross browser, cross device platforms!

Third design to create animated spinner: Basic Loading Spinner

Also, we need to create design with basic loading spinner as it is very widely used and most popular design as well.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-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>

<h2>How To Create A Loader</h2>

<div class="loader"></div>

</body>
</html>

DglobalTech

Technology Blog

Create an Animated Spinner Using HTML and CSS

Next Step is to select SVG which we will need to add Spinner.

Third design to create animated spinner: Basic Loading Spinner

Be the first to comment

Leave a Reply Cancel reply