Yet Another Circle Spinning Loader

Written by @phuang 5 November 2022

Yet another circle spinning loader animation done with css used for preloading while web content is being downloaded.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!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>Yet Another Circle Spinning Loader</title>



<!-- font awesome library include 4.7 -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />



<!-- css styles -->

<style>



.loader5-spinner-container, .loader5-spinner-container > *:nth-of-type(1) {

  border-radius: 100%;

  position: absolute;

  top: 50%;

  left: 50%;

  z-index: 2000;

}



/*



For tints, calculate (255 - previous value), multiply that

by 1/4, 1/2, 3/4, etc. (the greater the factor, the lighter the tint),

and add that to the previous value (assuming each.component is a

8-bit integer).

*/

/* line 2, ../../../../loaders/scss/partials/_container.scss */

.loader-container {

  position: fixed;

  width: 100%;

  height: 100%;

  top: 0;

  z-index: 1000;

}



/* line 1, ../../../../loaders/scss/partials/_force-gpu.scss */

.force-gpu {

  -webkit-transform: translateZ(0);

  -moz-transform: translateZ(0);

  -ms-transform: translateZ(0);

  -o-transform: translateZ(0);

  transform: translateZ(0);

}



/******************************** Config ********************************/

/* line 6, ../../../../loaders/scss/loaders/_spinner5.scss */

.loader5-spinner-container {

  width: 50px;

  height: 50px;

  margin: -30px 0px 0px -30px;

  border: 5px #898989 solid;

}



/* line 23, ../../../../loaders/scss/loaders/_spinner5.scss */

.loader5-spinner-container > *:nth-of-type(1) {

  z-index: 2001;

  width: 50px;

  height: 50px;

  margin: -30px -30px;

  border: 5px solid transparent;

  border-top-color: white;

  animation: loader5-spinner-spin 0.5s linear infinite;

}



/******************************** Animations ********************************/

@-webkit-keyframes loader5-spinner-spin {

  0% {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}



@-moz-keyframes loader5-spinner-spin {

  0% {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}



@-ms-keyframes loader5-spinner-spin {

  /* line 57, ../../../../loaders/scss/loaders/_spinner5.scss */

  0% {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  /* line 61, ../../../../loaders/scss/loaders/_spinner5.scss */

  100% {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}



@-o-keyframes loader5-spinner-spin {

  0% {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}



@keyframes loader5-spinner-spin {

  0% {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}


body{
	text-align: center;
}
body
a{
	color: white;
}
a:hover, a:visited{
	color: orange;
}
.loader-container{
	margin-top: 2rem;
}

</style>

</head>



<!--  style="background-color:#1D4A6B"-->

<body  style="background-color:#1D4A6B">





  <div class="loader-container force-gpu">

    <div class="loader5-spinner-container">



      <div></div>

    </div>

  </div>





<script>



/*   



Tutorial Description



Yet another circle spinning loader animation done with css used for preloading while web content is being downloaded.



*/



</script>

</body>

</html><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @phuang

Help desk analyst transitioning to a full-stack developer role. Hoping to learn and collaborate with everyone. Happy coding!

P

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2