<div id="loader">
<div class="box">
<hr>
<h1>Some loaders with zoom and gradient color animations</h1>
<hr>
<div class="circle">
<div class="ribble">
<h2>Fast</h2>
<div class="blobb-gradient circle fast"></div>
<div class="blobb-gradient circle fast"></div>
<div class="blobb-gradient circle fast"></div>
<div class="blobb-gradient circle fast"></div>
</div>
<div class="ribble">
<h2>Slow</h2>
<div class="blobb-gradient circle slow"></div>
<div class="blobb-gradient circle slow"></div>
<div class="blobb-gradient circle slow"></div>
<div class="blobb-gradient circle slow"></div>
</div>
<div class="ribble">
<h2>Slowest</h2>
<div class="blobb-gradient circle slowest"></div>
<div class="blobb-gradient circle slowest"></div>
<div class="blobb-gradient circle slowest"></div>
<div class="blobb-gradient circle slowest"></div>
</div>
</div>
<div class="square">
<div class="ribble">
<h2>Fast</h2>
<div class="blobb-gradient square fast"></div>
<div class="blobb-gradient square fast"></div>
<div class="blobb-gradient square fast"></div>
<div class="blobb-gradient square fast"></div>
</div>
<div class="ribble">
<h2>Slow</h2>
<div class="blobb-gradient square slow"></div>
<div class="blobb-gradient square slow"></div>
<div class="blobb-gradient square slow"></div>
<div class="blobb-gradient square slow"></div>
</div>
<div class="ribble">
<h2>Slowest</h2>
<div class="blobb-gradient square slowest"></div>
<div class="blobb-gradient square slowest"></div>
<div class="blobb-gradient square slowest"></div>
<div class="blobb-gradient square slowest"></div>
</div>
</div>
</div>
<div class="box">
<hr>
<h1>Some Loaders with zoom and color animations</h1>
<hr>
<div class="circle">
<div class="ribble">
<h2>Fast</h2>
<div class="blobb circle fast"></div>
<div class="blobb circle fast"></div>
<div class="blobb circle fast"></div>
<div class="blobb circle fast"></div>
</div>
<div class="ribble">
<h2>Slow</h2>
<div class="blobb circle slow"></div>
<div class="blobb circle slow"></div>
<div class="blobb circle slow"></div>
<div class="blobb circle slow"></div>
</div>
<div class="ribble">
<h2>Slowest</h2>
<div class="blobb circle slowest"></div>
<div class="blobb circle slowest"></div>
<div class="blobb circle slowest"></div>
<div class="blobb circle slowest"></div>
</div>
</div>
<div class="square">
<div class="ribble">
<h2>Fast</h2>
<div class="blobb square fast"></div>
<div class="blobb square fast"></div>
<div class="blobb square fast"></div>
<div class="blobb square fast"></div>
</div>
<div class="ribble">
<h2>Slow</h2>
<div class="blobb square slow"></div>
<div class="blobb square slow"></div>
<div class="blobb square slow"></div>
<div class="blobb square slow"></div>
</div>
<div class="ribble">
<h2>Slowest</h2>
<div class="blobb square slowest"></div>
<div class="blobb square slowest"></div>
<div class="blobb square slowest"></div>
<div class="blobb square slowest"></div>
</div>
</div>
</div>
<div class="box">
<hr>
<h1>Some loaders without zoom and color fading</h1>
<hr>
<div class="square">
<div class="ribble">
<h2>Fast</h2>
<div class="fade square fast"></div>
<div class="fade square fast"></div>
<div class="fade square fast"></div>
<div class="fade square fast"></div>
</div>
<div class="ribble">
<h2>Slow</h2>
<div class="fade square slow"></div>
<div class="fade square slow"></div>
<div class="fade square slow"></div>
<div class="fade square slow"></div>
</div>
<div class="ribble">
<h2>Slowest</h2>
<div class="fade square slowest"></div>
<div class="fade square slowest"></div>
<div class="fade square slowest"></div>
<div class="fade square slowest"></div>
</div>
</div>
<div class="square">
<div class="ribble">
<h2>Fast</h2>
<div class="fade square nm fast"></div>
<div class="fade square nm fast"></div>
<div class="fade square nm fast"></div>
<div class="fade square nm fast"></div>
</div>
<div class="ribble">
<h2>Slow</h2>
<div class="fade square nm slow"></div>
<div class="fade square nm slow"></div>
<div class="fade square nm slow"></div>
<div class="fade square nm slow"></div>
</div>
<div class="ribble">
<h2>Slowest</h2>
<div class="fade square nm slowest"></div>
<div class="fade square nm slowest"></div>
<div class="fade square nm slowest"></div>
<div class="fade square nm slowest"></div>
</div>
</div>
<div class="circle">
<div class="ribble">
<h2>Fast</h2>
<div class="fade circle fast"></div>
<div class="fade circle fast"></div>
<div class="fade circle fast"></div>
<div class="fade circle fast"></div>
</div>
<div class="ribble">
<h2>Slow</h2>
<div class="fade circle slow"></div>
<div class="fade circle slow"></div>
<div class="fade circle slow"></div>
<div class="fade circle slow"></div>
</div>
<div class="ribble">
<h2>Slowest</h2>
<div class="fade circle slowest"></div>
<div class="fade circle slowest"></div>
<div class="fade circle slowest"></div>
<div class="fade circle slowest"></div>
</div>
</div>
</div>
<div class="box">
<hr>
<h1>Some loaders without zoom and gradient color fading</h1>
<hr>
<div class="square">
<div class="ribble">
<h2>Fast</h2>
<div class="fade-gradient square fast"></div>
<div class="fade-gradient square fast"></div>
<div class="fade-gradient square fast"></div>
<div class="fade-gradient square fast"></div>
</div>
<div class="ribble">
<h2>Slow</h2>
<div class="fade-gradient square slow"></div>
<div class="fade-gradient square slow"></div>
<div class="fade-gradient square slow"></div>
<div class="fade-gradient square slow"></div>
</div>
<div class="ribble">
<h2>Slowest</h2>
<div class="fade-gradient square slowest"></div>
<div class="fade-gradient square slowest"></div>
<div class="fade-gradient square slowest"></div>
<div class="fade-gradient square slowest"></div>
</div>
</div>
<div class="square">
<div class="ribble">
<h2>Fast</h2>
<div class="fade-gradient square nm fast"></div>
<div class="fade-gradient square nm fast"></div>
<div class="fade-gradient square nm fast"></div>
<div class="fade-gradient square nm fast"></div>
</div>
<div class="ribble">
<h2>Slow</h2>
<div class="fade-gradient square nm slow"></div>
<div class="fade-gradient square nm slow"></div>
<div class="fade-gradient square nm slow"></div>
<div class="fade-gradient square nm slow"></div>
</div>
<div class="ribble">
<h2>Slowest</h2>
<div class="fade-gradient square nm slowest"></div>
<div class="fade-gradient square nm slowest"></div>
<div class="fade-gradient square nm slowest"></div>
<div class="fade-gradient square nm slowest"></div>
</div>
</div>
<div class="circle">
<div class="ribble">
<h2>Fast</h2>
<div class="fade-gradient circle fast"></div>
<div class="fade-gradient circle fast"></div>
<div class="fade-gradient circle fast"></div>
<div class="fade-gradient circle fast"></div>
</div>
<div class="ribble">
<h2>Slow</h2>
<div class="fade-gradient circle slow"></div>
<div class="fade-gradient circle slow"></div>
<div class="fade-gradient circle slow"></div>
<div class="fade-gradient circle slow"></div>
</div>
<div class="ribble">
<h2>Slowest</h2>
<div class="fade-gradient circle slowest"></div>
<div class="fade-gradient circle slowest"></div>
<div class="fade-gradient circle slowest"></div>
<div class="fade-gradient circle slowest"></div>
</div>
</div>
</div>
</div>
/* Loader Size */
$loader-width: 20px;
$loader-height: 20px;
/* Animation durations */
$fast-animation: 1.25s;
$slow-animation: 1.55s;
$slowest-animation: 2s;
/* Animation delay */
$animation-delay: 0.25s;
/* Animation Color and Zoom */
// First blobb
$blobb-first-color: rgb(45, 125, 154);
$blobb-second-color: rgb(0, 153, 188);
// Second blobb
$blobb-third-color: rgb(22, 160, 133);
$blobb-fourth-color: rgb(46, 204, 113);
// Fade without zoom
$fade-from-color: rgb(45, 125, 154);
$fade-to-color: rgb(0, 172, 211);
// Fade without zoom gradient
$fade-gradient-from-color: rgb(22, 160, 133);
$fade-gradient-to-color: rgb(46, 204, 113);
$zoom-size: 1.2;
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
font-size: 100%;
color: rgb(100, 100, 100);
padding: 0;
}
h1 {
font-size: 20px;
}
h2 {
font-size: 17px;
}
body {
background: #eee;
}
footer {
#wrapper {
width: 768px;
height: 50px;
text-align: center;
margin: auto;
background: #fff;
}
a {
line-height: 50px;
}
}
.box {
padding-top: 25px;
padding: 25px;
margin-bottom: 25px;
max-width: 768px;
margin: 25px auto;
background: #fff;
}
#loader {
.ribble {
display: inline-block;
min-width: 33.33333%;
margin-right: -3px;
min-height: 100px;
&:not(:first-child) {
}
.blobb {
width: $loader-width;
display: inline-block;
height: $loader-height;
margin-right: 1.5px;
background-color: $blobb-first-color;
-webkit-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
&.circle {
border-radius: 50%;
}
&.square {
border-radius: 0%;
}
&.fast {
-webkit-animation: blobb $fast-animation infinite;
animation: blobb $fast-animation infinite;
}
&.slow {
-webkit-animation: blobb $slow-animation infinite;
animation: blobb $slow-animation infinite;
}
&.slowest {
-webkit-animation: blobb $slowest-animation infinite;
animation: blobb $slowest-animation infinite;
}
&:nth-child(2) {
-webkit-animation-delay: $animation-delay;
animation-delay: $animation-delay;
}
&:nth-child(3) {
-webkit-animation-delay: $animation-delay*2;
animation-delay: $animation-delay*2;
}
&:nth-child(4) {
-webkit-animation-delay: $animation-delay*3;
animation-delay: $animation-delay*3;
}
&:nth-child(5) {
-webkit-animation-delay: $animation-delay*4;
animation-delay: $animation-delay*4;
}
}
.blobb-gradient {
width: $loader-width;
display: inline-block;
height: $loader-height;
margin-right: 1.5px;
background-color: $blobb-third-color;
-webkit-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
&.circle {
border-radius: 50%;
}
&.square {
border-radius: 0%;
}
&.fast {
-webkit-animation: blobb-gradient $fast-animation infinite;
animation: blobb-gradient $fast-animation infinite;
}
&.slow {
-webkit-animation: blobb-gradient $slow-animation infinite;
animation: blobb-gradient $slow-animation infinite;
}
&.slowest {
-webkit-animation: blobb-gradient $slowest-animation infinite;
animation: blobb-gradient $slowest-animation infinite;
}
&:nth-child(2) {
-webkit-animation-delay: $animation-delay;
animation-delay: $animation-delay;
}
&:nth-child(3) {
-webkit-animation-delay: $animation-delay*2;
animation-delay: $animation-delay*2;
}
&:nth-child(4) {
-webkit-animation-delay: $animation-delay*3;
animation-delay: $animation-delay*3;
}
&:nth-child(5) {
-webkit-animation-delay: $animation-delay*4;
animation-delay: $animation-delay*4;
}
}
.fade {
width: $loader-width;
display: inline-block;
height: $loader-height;
margin-right: 1.5px;
background-color: $fade-from-color;
-webkit-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
&.nm {
float: left;
margin: 0;
}
&.circle {
border-radius: 50%;
}
&.square {
border-radius: 0%;
}
&.fast {
-webkit-animation: fade $fast-animation infinite;
animation: fade $fast-animation infinite;
}
&.slow {
-webkit-animation: fade $slow-animation infinite;
animation: fade $slow-animation infinite;
}
&.slowest {
-webkit-animation: fade $slowest-animation infinite;
animation: fade $slowest-animation infinite;
}
&:nth-child(2) {
-webkit-animation-delay: $animation-delay;
animation-delay: $animation-delay;
}
&:nth-child(3) {
-webkit-animation-delay: $animation-delay*2;
animation-delay: $animation-delay*2;
}
&:nth-child(4) {
-webkit-animation-delay: $animation-delay*3;
animation-delay: $animation-delay*3;
}
&:nth-child(5) {
-webkit-animation-delay: $animation-delay*4;
animation-delay: $animation-delay*4;
}
}
.fade-gradient {
width: $loader-width;
display: inline-block;
height: $loader-height;
margin-right: 1.5px;
background-color: $fade-gradient-from-color;
-webkit-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
&.nm {
float: left;
margin: 0;
}
&.circle {
border-radius: 50%;
}
&.square {
border-radius: 0%;
}
&.fast {
-webkit-animation: fade-gradient $fast-animation infinite;
animation: fade-gradient $fast-animation infinite;
}
&.slow {
-webkit-animation: fade-gradient $slow-animation infinite;
animation: fade-gradient $slow-animation infinite;
}
&.slowest {
-webkit-animation: fade-gradient $slowest-animation infinite;
animation: fade-gradient $slowest-animation infinite;
}
&:nth-child(2) {
-webkit-animation-delay: $animation-delay;
animation-delay: $animation-delay;
}
&:nth-child(3) {
-webkit-animation-delay: $animation-delay*2;
animation-delay: $animation-delay*2;
}
&:nth-child(4) {
-webkit-animation-delay: $animation-delay*3;
animation-delay: $animation-delay*3;
}
&:nth-child(5) {
-webkit-animation-delay: $animation-delay*4;
animation-delay: $animation-delay*4;
}
}
}
}
/* Animation */
@-webkit-keyframes blobb {
0%,
25% {
background: $blobb-first-color;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
background-color: $blobb-second-color;
-webkit-transform: scale($zoom-size);
transform: scale($zoom-size);
}
100% {
background-color: $blobb-first-color;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes blobb {
0%,
25% {
background: $blobb-first-color;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
background-color: $blobb-second-color;
-webkit-transform: scale($zoom-size);
transform: scale($zoom-size);
}
100% {
background-color: $blobb-first-color;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes blobb-gradient {
0%,
25% {
background: $blobb-third-color;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
background-color: $blobb-fourth-color;
-webkit-transform: scale($zoom-size);
transform: scale($zoom-size);
}
100% {
background-color: $blobb-third-color;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes blobb-gradient {
0%,
25% {
background: $blobb-third-color;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
background-color: $blobb-fourth-color;
-webkit-transform: scale($zoom-size);
transform: scale($zoom-size);
}
100% {
background-color: $blobb-third-color;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes fade {
0%,
5% {
background: $fade-from-color;
}
50% {
background-color: $fade-to-color;
}
100% {
background-color: $fade-from-color;
}
}
@keyframes fade {
0%,
5% {
background: $fade-from-color;
}
50% {
background-color: $fade-to-color;
}
100% {
background-color: $fade-from-color;
}
}
@-webkit-keyframes fade-gradient {
0%,
5% {
background: $fade-gradient-from-color;
}
50% {
background-color: $fade-gradient-to-color;
}
100% {
background-color: $fade-gradient-from-color;
}
}
@keyframes fade-gradient {
0%,
5% {
background: $fade-gradient-from-color;
}
50% {
background-color: $fade-gradient-to-color;
}
100% {
background-color: $fade-gradient-from-color;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.