Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

Account Created!

Please check your email for instructions to activate your account.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter
Instagram
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Fading Trailer Circle Spinner Loader

Written by @phuang 5 November 2022

Circles, with a fading trail rotating around a circular path 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>Fading Trailer Circle Spinner 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>



.loader2-spinner-container, .loader2-spinner-container > * {

  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/_spinner2.scss */

.loader2-spinner-container {

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

}



/* line 14, ../../../../loaders/scss/loaders/_spinner2.scss */

.loader2-spinner-container > * {

  width: 10px;

  height: 10px;

  margin: -5px 0px 0px -5px;

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

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

  width: 10px;

  height: 10px;

  transform: rotate(30deg) translate(50px) rotate(-30deg);

  background: rgba(20, 88, 131, 0.08);

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

.loader2-spinner-container > *:nth-of-type(2) {

  width: 10px;

  height: 10px;

  transform: rotate(60deg) translate(50px) rotate(-60deg);

  background: rgba(43, 105, 143, 0.17);

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

.loader2-spinner-container > *:nth-of-type(3) {

  width: 10px;

  height: 10px;

  transform: rotate(90deg) translate(50px) rotate(-90deg);

  background: rgba(64, 119, 154, 0.25);

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

.loader2-spinner-container > *:nth-of-type(4) {

  width: 10px;

  height: 10px;

  transform: rotate(120deg) translate(50px) rotate(-120deg);

  background: rgba(84, 134, 165, 0.33);

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

.loader2-spinner-container > *:nth-of-type(5) {

  width: 10px;

  height: 10px;

  transform: rotate(150deg) translate(50px) rotate(-150deg);

  background: rgba(107, 150, 177, 0.42);

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

.loader2-spinner-container > *:nth-of-type(6) {

  width: 10px;

  height: 10px;

  transform: rotate(180deg) translate(50px) rotate(-180deg);

  background: rgba(128, 165, 188, 0.5);

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

.loader2-spinner-container > *:nth-of-type(7) {

  width: 10px;

  height: 10px;

  transform: rotate(210deg) translate(50px) rotate(-210deg);

  background: rgba(148, 179, 198, 0.58);

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

.loader2-spinner-container > *:nth-of-type(8) {

  width: 10px;

  height: 10px;

  transform: rotate(240deg) translate(50px) rotate(-240deg);

  background: rgba(171, 195, 210, 0.67);

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

.loader2-spinner-container > *:nth-of-type(9) {

  width: 10px;

  height: 10px;

  transform: rotate(270deg) translate(50px) rotate(-270deg);

  background: rgba(191, 210, 221, 0.75);

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

.loader2-spinner-container > *:nth-of-type(10) {

  width: 10px;

  height: 10px;

  transform: rotate(300deg) translate(50px) rotate(-300deg);

  background: rgba(212, 224, 232, 0.83);

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

.loader2-spinner-container > *:nth-of-type(11) {

  width: 10px;

  height: 10px;

  transform: rotate(330deg) translate(50px) rotate(-330deg);

  background: rgba(235, 241, 244, 0.92);

}



/* line 10, ../../../../loaders/scss/modules/mixins/_spinner2_mixin.scss */

.loader2-spinner-container > *:nth-of-type(12) {

  width: 10px;

  height: 10px;

  transform: rotate(360deg) translate(50px) rotate(-360deg);

  background: white;

}



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

@-webkit-keyframes loader2-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 loader2-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 loader2-spinner-spin {

  /* line 42, ../../../../loaders/scss/loaders/_spinner2.scss */

  0% {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  /* line 46, ../../../../loaders/scss/loaders/_spinner2.scss */

  100% {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}



@-o-keyframes loader2-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 loader2-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">





  <!-- Loader 2 -->

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



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



      <div></div>

      <div></div>

      <div></div>

      <div></div>



      <div></div>

      <div></div>

      <div></div>

      <div></div>



      <div></div>

      <div></div>

      <div></div>

      <div></div>



    </div>



  </div>









<script>



/*   



Tutorial Description



Circles, with a fading trail rotating around a circular path 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
Neomorphism Button with Hover Effect
2
Vanishing Spinning Ball Loader
3
Yet Another Circle Spinning Loader
4
Oval Ticker Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2