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

Shrinking and enlarge loader animation

Written by @phuang 4 November 2022

Shrinking and enlarging bars 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>Shrinking and enlarge loader animation</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>



.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), .loader7-bars-container, .loader7-bars-container > *:nth-of-type(1), .loader7-bars-container > *:nth-of-type(2), .loader7-bars-container > *:nth-of-type(3), .loader7-bars-container > *:nth-of-type(4), .loader7-bars-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, C:/xampp/htdocs/loader/scss/partials/_container.scss */

.loader-container {

  position: fixed;

  width: 100%;

  height: 100%;

  top: 0;

  z-index: 1000;

}



/* line 1, C:/xampp/htdocs/loader/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, C:/xampp/htdocs/loader/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, C:/xampp/htdocs/loader/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, C:/xampp/htdocs/loader/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, C:/xampp/htdocs/loader/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, C:/xampp/htdocs/loader/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, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

.loader6-shape-container > *:nth-of-type(1) {

  animation: loader6-shape-animate-1 1s linear infinite;

}



/* line 192, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

.loader6-shape-container > *:nth-of-type(2) {

  animation: loader6-shape-animate-2 1s linear infinite;

}



/* line 192, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

.loader6-shape-container > *:nth-of-type(3) {

  animation: loader6-shape-animate-3 1s linear infinite;

}



/* line 192, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

.loader6-shape-container > *:nth-of-type(4) {

  animation: loader6-shape-animate-4 1s linear infinite;

}



/* line 192, C:/xampp/htdocs/loader/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, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  0% {

    transform: translateX(0px) scale(0, 0);

  }

  /* line 273, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  20% {

    transform: translateX(0px) scale(1, 1);

  }

  /* line 280, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  40% {

    transform: translateX(40px) scale(1, 1);

  }

  /* line 280, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  60% {

    transform: translateX(80px) scale(1, 1);

  }

  /* line 292, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  80% {

    transform: translateX(80px) scale(0, 0);

  }

  /* line 292, C:/xampp/htdocs/loader/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, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  0% {

    transform: translateX(0px) scale(1, 1);

  }

  /* line 361, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  20% {

    transform: translateX(40px) scale(1, 1);

  }

  /* line 370, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  40% {

    transform: translateX(80px) scale(1, 1);

  }

  /* line 378, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  60% {

    transform: translateX(80px) scale(0, 0);

  }

  /* line 378, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  80% {

    transform: translateX(0px) scale(0, 0);

  }

  /* line 385, C:/xampp/htdocs/loader/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, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  0% {

    transform: translateX(0px) scale(1, 1);

  }

  /* line 361, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  20% {

    transform: translateX(40px) scale(1, 1);

  }

  /* line 378, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  40% {

    transform: translateX(40px) scale(0, 0);

  }

  /* line 378, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  60% {

    transform: translateX(-40px) scale(0, 0);

  }

  /* line 385, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  80% {

    transform: translateX(-40px) scale(1, 1);

  }

  /* line 392, C:/xampp/htdocs/loader/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, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  0% {

    transform: translateX(0px) scale(1, 1);

  }

  /* line 427, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  20% {

    transform: translateX(0px) scale(0, 0);

  }

  /* line 432, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  40% {

    transform: translateX(-80px) scale(0, 0);

  }

  /* line 437, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  60% {

    transform: translateX(-80px) scale(1, 1);

  }

  /* line 437, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  80% {

    transform: translateX(-40px) scale(1, 1);

  }

  /* line 437, C:/xampp/htdocs/loader/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, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  0% {

    transform: translateX(0px) scale(0, 0);

  }

  /* line 479, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  20% {

    transform: translateX(-80px) scale(0, 0);

  }

  /* line 502, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  40% {

    transform: translateX(-80px) scale(1, 1);

  }

  /* line 486, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  60% {

    transform: translateX(-40px) scale(1, 1);

  }

  /* line 502, C:/xampp/htdocs/loader/scss/modules/mixins/_shape1_mixin.scss */

  80% {

    transform: translateX(0px) scale(1, 1);

  }

  /* line 496, C:/xampp/htdocs/loader/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);

  }

}



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

/* line 9, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

.loader7-bars-container > *:nth-of-type(1) {

  border-radius: 2px;

  background-color: #c8cc92;

  width: 8px;

  height: 40px;

  border: 2px #c8cc92 solid;

  margin: -22px 0px 0px -54px;

}



/* line 9, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

.loader7-bars-container > *:nth-of-type(2) {

  border-radius: 2px;

  background-color: #c8cc92;

  width: 8px;

  height: 40px;

  border: 2px #c8cc92 solid;

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

}



/* line 9, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

.loader7-bars-container > *:nth-of-type(3) {

  border-radius: 2px;

  background-color: #c8cc92;

  width: 8px;

  height: 40px;

  border: 2px #c8cc92 solid;

  margin: -22px 0px 0px -6px;

}



/* line 9, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

.loader7-bars-container > *:nth-of-type(4) {

  border-radius: 2px;

  background-color: #c8cc92;

  width: 8px;

  height: 40px;

  border: 2px #c8cc92 solid;

  margin: -22px 0px 0px 18px;

}



/* line 9, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

.loader7-bars-container > *:nth-of-type(5) {

  border-radius: 2px;

  background-color: #c8cc92;

  width: 8px;

  height: 40px;

  border: 2px #c8cc92 solid;

  margin: -22px 0px 0px 42px;

}



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

/* line 117, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

.loader7-bars-container > *:nth-of-type(1) {

  animation: loader7-bars-scale1;

  animation-duration: 0.5s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}



/* line 117, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

.loader7-bars-container > *:nth-of-type(2) {

  animation: loader7-bars-scale2;

  animation-duration: 0.5s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}



/* line 117, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

.loader7-bars-container > *:nth-of-type(3) {

  animation: loader7-bars-scale3;

  animation-duration: 0.5s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}



/* line 117, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

.loader7-bars-container > *:nth-of-type(4) {

  animation: loader7-bars-scale4;

  animation-duration: 0.5s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}



/* line 117, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

.loader7-bars-container > *:nth-of-type(5) {

  animation: loader7-bars-scale5;

  animation-duration: 0.5s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}



css: 0 0.33333 0.66667 1 0.66667 0.33333;

@-webkit-keyframes loader7-bars-scale1 {

  0% {

    transform: scale(1, 0);

  }

  16.67% {

    transform: scale(1, 0.33333);

  }

  33.33% {

    transform: scale(1, 0.66667);

  }

  50% {

    transform: scale(1, 1);

  }

  66.67% {

    transform: scale(1, 0.66667);

  }

  83.33% {

    transform: scale(1, 0.33333);

  }

  100% {

    transform: scale(1, 0);

  }

}



@-moz-keyframes loader7-bars-scale1 {

  0% {

    transform: scale(1, 0);

  }

  16.67% {

    transform: scale(1, 0.33333);

  }

  33.33% {

    transform: scale(1, 0.66667);

  }

  50% {

    transform: scale(1, 1);

  }

  66.67% {

    transform: scale(1, 0.66667);

  }

  83.33% {

    transform: scale(1, 0.33333);

  }

  100% {

    transform: scale(1, 0);

  }

}



@-ms-keyframes loader7-bars-scale1 {

  /* line 216, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  0% {

    transform: scale(1, 0);

  }

  /* line 231, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  16.67% {

    transform: scale(1, 0.33333);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  33.33% {

    transform: scale(1, 0.66667);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  50% {

    transform: scale(1, 1);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  66.67% {

    transform: scale(1, 0.66667);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  83.33% {

    transform: scale(1, 0.33333);

  }

  /* line 255, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  100% {

    transform: scale(1, 0);

  }

}



@-o-keyframes loader7-bars-scale1 {

  0% {

    transform: scale(1, 0);

  }

  16.67% {

    transform: scale(1, 0.33333);

  }

  33.33% {

    transform: scale(1, 0.66667);

  }

  50% {

    transform: scale(1, 1);

  }

  66.67% {

    transform: scale(1, 0.66667);

  }

  83.33% {

    transform: scale(1, 0.33333);

  }

  100% {

    transform: scale(1, 0);

  }

}



@keyframes loader7-bars-scale1 {

  0% {

    transform: scale(1, 0);

  }

  16.67% {

    transform: scale(1, 0.33333);

  }

  33.33% {

    transform: scale(1, 0.66667);

  }

  50% {

    transform: scale(1, 1);

  }

  66.67% {

    transform: scale(1, 0.66667);

  }

  83.33% {

    transform: scale(1, 0.33333);

  }

  100% {

    transform: scale(1, 0);

  }

}



@-webkit-keyframes loader7-bars-scale2 {

  0% {

    transform: scale(1, 0.33333);

  }

  16.67% {

    transform: scale(1, 0.66667);

  }

  33.33% {

    transform: scale(1, 1);

  }

  50% {

    transform: scale(1, 0.66667);

  }

  66.67% {

    transform: scale(1, 0.33333);

  }

  83.33% {

    transform: scale(1, 0);

  }

  100% {

    transform: scale(1, 0.33333);

  }

}



@-moz-keyframes loader7-bars-scale2 {

  0% {

    transform: scale(1, 0.33333);

  }

  16.67% {

    transform: scale(1, 0.66667);

  }

  33.33% {

    transform: scale(1, 1);

  }

  50% {

    transform: scale(1, 0.66667);

  }

  66.67% {

    transform: scale(1, 0.33333);

  }

  83.33% {

    transform: scale(1, 0);

  }

  100% {

    transform: scale(1, 0.33333);

  }

}



@-ms-keyframes loader7-bars-scale2 {

  /* line 216, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  0% {

    transform: scale(1, 0.33333);

  }

  /* line 231, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  16.67% {

    transform: scale(1, 0.66667);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  33.33% {

    transform: scale(1, 1);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  50% {

    transform: scale(1, 0.66667);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  66.67% {

    transform: scale(1, 0.33333);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  83.33% {

    transform: scale(1, 0);

  }

  /* line 255, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  100% {

    transform: scale(1, 0.33333);

  }

}



@-o-keyframes loader7-bars-scale2 {

  0% {

    transform: scale(1, 0.33333);

  }

  16.67% {

    transform: scale(1, 0.66667);

  }

  33.33% {

    transform: scale(1, 1);

  }

  50% {

    transform: scale(1, 0.66667);

  }

  66.67% {

    transform: scale(1, 0.33333);

  }

  83.33% {

    transform: scale(1, 0);

  }

  100% {

    transform: scale(1, 0.33333);

  }

}



@keyframes loader7-bars-scale2 {

  0% {

    transform: scale(1, 0.33333);

  }

  16.67% {

    transform: scale(1, 0.66667);

  }

  33.33% {

    transform: scale(1, 1);

  }

  50% {

    transform: scale(1, 0.66667);

  }

  66.67% {

    transform: scale(1, 0.33333);

  }

  83.33% {

    transform: scale(1, 0);

  }

  100% {

    transform: scale(1, 0.33333);

  }

}



@-webkit-keyframes loader7-bars-scale3 {

  0% {

    transform: scale(1, 0.66667);

  }

  16.67% {

    transform: scale(1, 1);

  }

  33.33% {

    transform: scale(1, 0.66667);

  }

  50% {

    transform: scale(1, 0.33333);

  }

  66.67% {

    transform: scale(1, 0);

  }

  83.33% {

    transform: scale(1, 0.33333);

  }

  100% {

    transform: scale(1, 0.66667);

  }

}



@-moz-keyframes loader7-bars-scale3 {

  0% {

    transform: scale(1, 0.66667);

  }

  16.67% {

    transform: scale(1, 1);

  }

  33.33% {

    transform: scale(1, 0.66667);

  }

  50% {

    transform: scale(1, 0.33333);

  }

  66.67% {

    transform: scale(1, 0);

  }

  83.33% {

    transform: scale(1, 0.33333);

  }

  100% {

    transform: scale(1, 0.66667);

  }

}



@-ms-keyframes loader7-bars-scale3 {

  /* line 216, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  0% {

    transform: scale(1, 0.66667);

  }

  /* line 231, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  16.67% {

    transform: scale(1, 1);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  33.33% {

    transform: scale(1, 0.66667);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  50% {

    transform: scale(1, 0.33333);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  66.67% {

    transform: scale(1, 0);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  83.33% {

    transform: scale(1, 0.33333);

  }

  /* line 255, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  100% {

    transform: scale(1, 0.66667);

  }

}



@-o-keyframes loader7-bars-scale3 {

  0% {

    transform: scale(1, 0.66667);

  }

  16.67% {

    transform: scale(1, 1);

  }

  33.33% {

    transform: scale(1, 0.66667);

  }

  50% {

    transform: scale(1, 0.33333);

  }

  66.67% {

    transform: scale(1, 0);

  }

  83.33% {

    transform: scale(1, 0.33333);

  }

  100% {

    transform: scale(1, 0.66667);

  }

}



@keyframes loader7-bars-scale3 {

  0% {

    transform: scale(1, 0.66667);

  }

  16.67% {

    transform: scale(1, 1);

  }

  33.33% {

    transform: scale(1, 0.66667);

  }

  50% {

    transform: scale(1, 0.33333);

  }

  66.67% {

    transform: scale(1, 0);

  }

  83.33% {

    transform: scale(1, 0.33333);

  }

  100% {

    transform: scale(1, 0.66667);

  }

}



@-webkit-keyframes loader7-bars-scale4 {

  0% {

    transform: scale(1, 1);

  }

  16.67% {

    transform: scale(1, 0.66667);

  }

  33.33% {

    transform: scale(1, 0.33333);

  }

  50% {

    transform: scale(1, 0);

  }

  66.67% {

    transform: scale(1, 0.33333);

  }

  83.33% {

    transform: scale(1, 0.66667);

  }

  100% {

    transform: scale(1, 1);

  }

}



@-moz-keyframes loader7-bars-scale4 {

  0% {

    transform: scale(1, 1);

  }

  16.67% {

    transform: scale(1, 0.66667);

  }

  33.33% {

    transform: scale(1, 0.33333);

  }

  50% {

    transform: scale(1, 0);

  }

  66.67% {

    transform: scale(1, 0.33333);

  }

  83.33% {

    transform: scale(1, 0.66667);

  }

  100% {

    transform: scale(1, 1);

  }

}



@-ms-keyframes loader7-bars-scale4 {

  /* line 216, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  0% {

    transform: scale(1, 1);

  }

  /* line 231, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  16.67% {

    transform: scale(1, 0.66667);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  33.33% {

    transform: scale(1, 0.33333);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  50% {

    transform: scale(1, 0);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  66.67% {

    transform: scale(1, 0.33333);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  83.33% {

    transform: scale(1, 0.66667);

  }

  /* line 255, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  100% {

    transform: scale(1, 1);

  }

}



@-o-keyframes loader7-bars-scale4 {

  0% {

    transform: scale(1, 1);

  }

  16.67% {

    transform: scale(1, 0.66667);

  }

  33.33% {

    transform: scale(1, 0.33333);

  }

  50% {

    transform: scale(1, 0);

  }

  66.67% {

    transform: scale(1, 0.33333);

  }

  83.33% {

    transform: scale(1, 0.66667);

  }

  100% {

    transform: scale(1, 1);

  }

}



@keyframes loader7-bars-scale4 {

  0% {

    transform: scale(1, 1);

  }

  16.67% {

    transform: scale(1, 0.66667);

  }

  33.33% {

    transform: scale(1, 0.33333);

  }

  50% {

    transform: scale(1, 0);

  }

  66.67% {

    transform: scale(1, 0.33333);

  }

  83.33% {

    transform: scale(1, 0.66667);

  }

  100% {

    transform: scale(1, 1);

  }

}



@-webkit-keyframes loader7-bars-scale5 {

  0% {

    transform: scale(1, 0.66667);

  }

  16.67% {

    transform: scale(1, 0.33333);

  }

  33.33% {

    transform: scale(1, 0);

  }

  50% {

    transform: scale(1, 0.33333);

  }

  66.67% {

    transform: scale(1, 0.66667);

  }

  83.33% {

    transform: scale(1, 1);

  }

  100% {

    transform: scale(1, 0.66667);

  }

}



@-moz-keyframes loader7-bars-scale5 {

  0% {

    transform: scale(1, 0.66667);

  }

  16.67% {

    transform: scale(1, 0.33333);

  }

  33.33% {

    transform: scale(1, 0);

  }

  50% {

    transform: scale(1, 0.33333);

  }

  66.67% {

    transform: scale(1, 0.66667);

  }

  83.33% {

    transform: scale(1, 1);

  }

  100% {

    transform: scale(1, 0.66667);

  }

}



@-ms-keyframes loader7-bars-scale5 {

  /* line 216, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  0% {

    transform: scale(1, 0.66667);

  }

  /* line 231, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  16.67% {

    transform: scale(1, 0.33333);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  33.33% {

    transform: scale(1, 0);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  50% {

    transform: scale(1, 0.33333);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  66.67% {

    transform: scale(1, 0.66667);

  }

  /* line 244, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  83.33% {

    transform: scale(1, 1);

  }

  /* line 255, C:/xampp/htdocs/loader/scss/modules/mixins/_bars1_mixin.scss */

  100% {

    transform: scale(1, 0.66667);

  }

}



@-o-keyframes loader7-bars-scale5 {

  0% {

    transform: scale(1, 0.66667);

  }

  16.67% {

    transform: scale(1, 0.33333);

  }

  33.33% {

    transform: scale(1, 0);

  }

  50% {

    transform: scale(1, 0.33333);

  }

  66.67% {

    transform: scale(1, 0.66667);

  }

  83.33% {

    transform: scale(1, 1);

  }

  100% {

    transform: scale(1, 0.66667);

  }

}



@keyframes loader7-bars-scale5 {

  0% {

    transform: scale(1, 0.66667);

  }

  16.67% {

    transform: scale(1, 0.33333);

  }

  33.33% {

    transform: scale(1, 0);

  }

  50% {

    transform: scale(1, 0.33333);

  }

  66.67% {

    transform: scale(1, 0.66667);

  }

  83.33% {

    transform: scale(1, 1);

  }

  100% {

    transform: scale(1, 0.66667);

  }

}


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 7 -->

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

    <div class="loader7-bars-container">

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

    </div>

  </div>



<script>



/*   



Tutorial Description



Shrinking and enlarging bars loader animation done with css used for preloading while web content is being downloaded.



*/



</script>

</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