It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 4 November 2022
Shrinking and enlarging bars loader animation done with css used for preloading while web content is being downloaded.
<!-- 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>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!