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.

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

Vanishing Spinning Ball Loader

Written by @phuang 5 November 2022

Cool spinning ball that disappears and reappears loader animation done with css used for preloading while web content is being downloaded.

Code Snippet:

                                                
                                                <!-- this script is provided by http://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>Vanishing Spinning Ball 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>

/* line 2, ../../../../loaders/scss/modules/_config.scss */
.loader6-shape-container, .loader6-shape-container > *:nth-of-type(1), .loader6-shape-container > *:nth-of-type(2), .loader6-shape-container > *:nth-of-type(3), .loader6-shape-container > *:nth-of-type(4), .loader6-shape-container > *:nth-of-type(5) {
  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 9, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
.loader6-shape-container > *:nth-of-type(1) {
  background-color: white;
  width: 16px;
  height: 16px;
  border: 2px white solid;
  margin: -10px 0px 0px -50px;
}

/* line 9, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
.loader6-shape-container > *:nth-of-type(2) {
  background-color: white;
  width: 16px;
  height: 16px;
  border: 2px white solid;
  margin: -10px 0px 0px -50px;
}

/* line 9, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
.loader6-shape-container > *:nth-of-type(3) {
  background-color: white;
  width: 16px;
  height: 16px;
  border: 2px white solid;
  margin: -10px 0px 0px -10px;
}

/* line 9, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
.loader6-shape-container > *:nth-of-type(4) {
  background-color: white;
  width: 16px;
  height: 16px;
  border: 2px white solid;
  margin: -10px 0px 0px 30px;
}

/* line 9, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
.loader6-shape-container > *:nth-of-type(5) {
  background-color: white;
  width: 16px;
  height: 16px;
  border: 2px white solid;
  margin: -10px 0px 0px 30px;
}

/******************************** Animations ********************************/
/* line 192, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
.loader6-shape-container > *:nth-of-type(1) {
  animation: loader6-shape-animate-1 1s linear infinite;
}

/* line 192, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
.loader6-shape-container > *:nth-of-type(2) {
  animation: loader6-shape-animate-2 1s linear infinite;
}

/* line 192, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
.loader6-shape-container > *:nth-of-type(3) {
  animation: loader6-shape-animate-3 1s linear infinite;
}

/* line 192, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
.loader6-shape-container > *:nth-of-type(4) {
  animation: loader6-shape-animate-4 1s linear infinite;
}

/* line 192, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
.loader6-shape-container > *:nth-of-type(5) {
  animation: loader6-shape-animate-5 1s linear infinite;
}

@-webkit-keyframes loader6-shape-animate-1 {
  0% {
    transform: translateX(0px) scale(0, 0);
  }
  20% {
    transform: translateX(0px) scale(1, 1);
  }
  40% {
    transform: translateX(40px) scale(1, 1);
  }
  60% {
    transform: translateX(80px) scale(1, 1);
  }
  80% {
    transform: translateX(80px) scale(0, 0);
  }
  100% {
    transform: translateX(0px) scale(0, 0);
  }
}

@-moz-keyframes loader6-shape-animate-1 {
  0% {
    transform: translateX(0px) scale(0, 0);
  }
  20% {
    transform: translateX(0px) scale(1, 1);
  }
  40% {
    transform: translateX(40px) scale(1, 1);
  }
  60% {
    transform: translateX(80px) scale(1, 1);
  }
  80% {
    transform: translateX(80px) scale(0, 0);
  }
  100% {
    transform: translateX(0px) scale(0, 0);
  }
}

@-ms-keyframes loader6-shape-animate-1 {
  /* line 268, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  0% {
    transform: translateX(0px) scale(0, 0);
  }
  /* line 273, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  20% {
    transform: translateX(0px) scale(1, 1);
  }
  /* line 280, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  40% {
    transform: translateX(40px) scale(1, 1);
  }
  /* line 280, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  60% {
    transform: translateX(80px) scale(1, 1);
  }
  /* line 292, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  80% {
    transform: translateX(80px) scale(0, 0);
  }
  /* line 292, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  100% {
    transform: translateX(0px) scale(0, 0);
  }
}

@-o-keyframes loader6-shape-animate-1 {
  0% {
    transform: translateX(0px) scale(0, 0);
  }
  20% {
    transform: translateX(0px) scale(1, 1);
  }
  40% {
    transform: translateX(40px) scale(1, 1);
  }
  60% {
    transform: translateX(80px) scale(1, 1);
  }
  80% {
    transform: translateX(80px) scale(0, 0);
  }
  100% {
    transform: translateX(0px) scale(0, 0);
  }
}

@keyframes loader6-shape-animate-1 {
  0% {
    transform: translateX(0px) scale(0, 0);
  }
  20% {
    transform: translateX(0px) scale(1, 1);
  }
  40% {
    transform: translateX(40px) scale(1, 1);
  }
  60% {
    transform: translateX(80px) scale(1, 1);
  }
  80% {
    transform: translateX(80px) scale(0, 0);
  }
  100% {
    transform: translateX(0px) scale(0, 0);
  }
}

@-webkit-keyframes loader6-shape-animate-2 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(40px) scale(1, 1);
  }
  40% {
    transform: translateX(80px) scale(1, 1);
  }
  60% {
    transform: translateX(80px) scale(0, 0);
  }
  80% {
    transform: translateX(0px) scale(0, 0);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-moz-keyframes loader6-shape-animate-2 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(40px) scale(1, 1);
  }
  40% {
    transform: translateX(80px) scale(1, 1);
  }
  60% {
    transform: translateX(80px) scale(0, 0);
  }
  80% {
    transform: translateX(0px) scale(0, 0);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-ms-keyframes loader6-shape-animate-2 {
  /* line 357, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  /* line 361, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  20% {
    transform: translateX(40px) scale(1, 1);
  }
  /* line 370, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  40% {
    transform: translateX(80px) scale(1, 1);
  }
  /* line 378, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  60% {
    transform: translateX(80px) scale(0, 0);
  }
  /* line 378, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  80% {
    transform: translateX(0px) scale(0, 0);
  }
  /* line 385, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-o-keyframes loader6-shape-animate-2 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(40px) scale(1, 1);
  }
  40% {
    transform: translateX(80px) scale(1, 1);
  }
  60% {
    transform: translateX(80px) scale(0, 0);
  }
  80% {
    transform: translateX(0px) scale(0, 0);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@keyframes loader6-shape-animate-2 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(40px) scale(1, 1);
  }
  40% {
    transform: translateX(80px) scale(1, 1);
  }
  60% {
    transform: translateX(80px) scale(0, 0);
  }
  80% {
    transform: translateX(0px) scale(0, 0);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-webkit-keyframes loader6-shape-animate-3 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(40px) scale(1, 1);
  }
  40% {
    transform: translateX(40px) scale(0, 0);
  }
  60% {
    transform: translateX(-40px) scale(0, 0);
  }
  80% {
    transform: translateX(-40px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-moz-keyframes loader6-shape-animate-3 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(40px) scale(1, 1);
  }
  40% {
    transform: translateX(40px) scale(0, 0);
  }
  60% {
    transform: translateX(-40px) scale(0, 0);
  }
  80% {
    transform: translateX(-40px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-ms-keyframes loader6-shape-animate-3 {
  /* line 357, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  /* line 361, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  20% {
    transform: translateX(40px) scale(1, 1);
  }
  /* line 378, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  40% {
    transform: translateX(40px) scale(0, 0);
  }
  /* line 378, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  60% {
    transform: translateX(-40px) scale(0, 0);
  }
  /* line 385, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  80% {
    transform: translateX(-40px) scale(1, 1);
  }
  /* line 392, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-o-keyframes loader6-shape-animate-3 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(40px) scale(1, 1);
  }
  40% {
    transform: translateX(40px) scale(0, 0);
  }
  60% {
    transform: translateX(-40px) scale(0, 0);
  }
  80% {
    transform: translateX(-40px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@keyframes loader6-shape-animate-3 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(40px) scale(1, 1);
  }
  40% {
    transform: translateX(40px) scale(0, 0);
  }
  60% {
    transform: translateX(-40px) scale(0, 0);
  }
  80% {
    transform: translateX(-40px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-webkit-keyframes loader6-shape-animate-4 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(0px) scale(0, 0);
  }
  40% {
    transform: translateX(-80px) scale(0, 0);
  }
  60% {
    transform: translateX(-80px) scale(1, 1);
  }
  80% {
    transform: translateX(-40px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-moz-keyframes loader6-shape-animate-4 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(0px) scale(0, 0);
  }
  40% {
    transform: translateX(-80px) scale(0, 0);
  }
  60% {
    transform: translateX(-80px) scale(1, 1);
  }
  80% {
    transform: translateX(-40px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-ms-keyframes loader6-shape-animate-4 {
  /* line 423, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  /* line 427, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  20% {
    transform: translateX(0px) scale(0, 0);
  }
  /* line 432, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  40% {
    transform: translateX(-80px) scale(0, 0);
  }
  /* line 437, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  60% {
    transform: translateX(-80px) scale(1, 1);
  }
  /* line 437, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  80% {
    transform: translateX(-40px) scale(1, 1);
  }
  /* line 437, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-o-keyframes loader6-shape-animate-4 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(0px) scale(0, 0);
  }
  40% {
    transform: translateX(-80px) scale(0, 0);
  }
  60% {
    transform: translateX(-80px) scale(1, 1);
  }
  80% {
    transform: translateX(-40px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@keyframes loader6-shape-animate-4 {
  0% {
    transform: translateX(0px) scale(1, 1);
  }
  20% {
    transform: translateX(0px) scale(0, 0);
  }
  40% {
    transform: translateX(-80px) scale(0, 0);
  }
  60% {
    transform: translateX(-80px) scale(1, 1);
  }
  80% {
    transform: translateX(-40px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@-webkit-keyframes loader6-shape-animate-5 {
  0% {
    transform: translateX(0px) scale(0, 0);
  }
  20% {
    transform: translateX(-80px) scale(0, 0);
  }
  40% {
    transform: translateX(-80px) scale(1, 1);
  }
  60% {
    transform: translateX(-40px) scale(1, 1);
  }
  80% {
    transform: translateX(0px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(0, 0);
  }
}

@-moz-keyframes loader6-shape-animate-5 {
  0% {
    transform: translateX(0px) scale(0, 0);
  }
  20% {
    transform: translateX(-80px) scale(0, 0);
  }
  40% {
    transform: translateX(-80px) scale(1, 1);
  }
  60% {
    transform: translateX(-40px) scale(1, 1);
  }
  80% {
    transform: translateX(0px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(0, 0);
  }
}

@-ms-keyframes loader6-shape-animate-5 {
  /* line 475, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  0% {
    transform: translateX(0px) scale(0, 0);
  }
  /* line 479, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  20% {
    transform: translateX(-80px) scale(0, 0);
  }
  /* line 502, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  40% {
    transform: translateX(-80px) scale(1, 1);
  }
  /* line 486, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  60% {
    transform: translateX(-40px) scale(1, 1);
  }
  /* line 502, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  80% {
    transform: translateX(0px) scale(1, 1);
  }
  /* line 496, ../../../../loaders/scss/modules/mixins/_shape1_mixin.scss */
  100% {
    transform: translateX(0px) scale(0, 0);
  }
}

@-o-keyframes loader6-shape-animate-5 {
  0% {
    transform: translateX(0px) scale(0, 0);
  }
  20% {
    transform: translateX(-80px) scale(0, 0);
  }
  40% {
    transform: translateX(-80px) scale(1, 1);
  }
  60% {
    transform: translateX(-40px) scale(1, 1);
  }
  80% {
    transform: translateX(0px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(0, 0);
  }
}

@keyframes loader6-shape-animate-5 {
  0% {
    transform: translateX(0px) scale(0, 0);
  }
  20% {
    transform: translateX(-80px) scale(0, 0);
  }
  40% {
    transform: translateX(-80px) scale(1, 1);
  }
  60% {
    transform: translateX(-40px) scale(1, 1);
  }
  80% {
    transform: translateX(0px) scale(1, 1);
  }
  100% {
    transform: translateX(0px) scale(0, 0);
  }
}

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="loader6-shape-container">

      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

    </div>
  </div>

</body>
</html><a target='_blank' href='http://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: fk khan, Proper, Jenisha, Mr Joseph Charles, Nikhil 999+
advertisement 2