How to Create a Loading Spinner in HTML CSS

officialweblearn January 30, 2023

//html css code with javascript

<!DOCTYPE html>
<html>

<link rel="stylesheet" href="style.css">

<header>


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

#html-spinner, #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 */

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

#html-spinner{
  left:25%; 
}

#svg-spinner{
  left:75%; 
}

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

#svg-para{
  left:50%;
}


</header>

<body>

    <div id="container">

        <!--Element for spinner made with HTML + CSS  Official Web Learn-->
        <div id="html-spinner"></div>
        <p id="html-para">Spinner created with only HTML and CSS</p>
      
        <!--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>




<script>

document.addEventListener("DOMContentLoaded", function(event) {
  //Removing article link when on mobiforge
  console.log(document.referrer);
  if (parent !== window && document.referrer.indexOf('https://mobiforge.com') === 0 && document.referrer.indexOf('http://mobiforge.com') === 0)
  {  
    console.log(document.referrer);
    document.getElementById('article-link').className = "fade-out";
  }

});


</script>

</body>


</html>