Responsive animated loader using only CSS3: three fading blocks with passing wave effect

This loader consists of three fading blocks and an effect of a passing wave. Whole animation is done by using @keyframes rule in CSS3 and doesn't require any animated GIF image.

Such loaders are widely used to indicate a loading process on webpages; for example, when AJAX query is running.

The current animated loader has responsive web design which means it can change its size dynamically, according to the width of the parent element of this loader.

Here is HTML code of the loader:

As was mentioned above, the loader changes its size according to the width of the parent element, so don't forget to wrap it in some element with a predefined width. By defining the width of the parent element, you can change the size of the loader.

This loader consists of three blocks where the first one can be found in HTML as i element and the last two are added by CSS styles as pseudo-elements before and after.

Animation for the loader is @keyframes rule in CSS3 that's applied to each block. It stretches them vertically one by one using scaleY transformation function in transform CSS property.

For last two blocks, the animation starts performing with some delay, this way it creates an effect of a "passing wave".

Here are CSS styles:

@-webkit-keyframes loading {
  0%,
  60%,
  100% {
    transform: scaleY(1); 
  }
  30% {
    transform: scaleY(1.3); 
  }
}

@keyframes loading {
  0%,
  60%,
  100% {
    transform: scaleY(1); 
  }
  30% {
    transform: scaleY(1.3); 
  }
}

.loader {
  position: relative;
  height: 0;
  padding-bottom: 125%;
}

.loader i,
.loader:before,
.loader:after {
  background-color: #000000;
  -webkit-animation: loading 800ms infinite ease-in-out;
  animation: loading 800ms infinite ease-in-out;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 28%;
}

.loader:before,
.loader:after {
  content: '';
}

.loader:before {
  left: 0;
}

.loader i {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
  right: 36%;
}

.loader:after {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
  right: 0;
}

The CSS styles above work perfectly well in the latest versions of modern browsers, such as Firefox, Safari, Chrome, Opera and Internet Explorer of version 10 and higher.

To see a responsiveness of the loader, try to resize your browser window while viewing a live demo below.

Live demo

The following animated GIF image demonstrates the loader in action as it can be also seen in the live demo above (it will be useful for readers who can't see it in action, because of the old browser version):

Responsive animated loader using only CSS3: three fading blocks with passing wave effect (simple)

Here is another variant of the loader that looks more attractive.

Just add CSS style below to the ones above:

.loader i,
.loader:before,
.loader:after {
  background-color: #EEEEEE;
  border: 2px solid #D8D8D8;
}

@-webkit-keyframes loading {
  0%,
  60%,
  100% {
    background-color: #EEEEEE;
    border-color: #D8D8D8;
    transform: scaleY(1);
  }
  30% {
    background-color: #4A4A4A;
    border-color: #000000;
    transform: scaleY(1.3);
  }
}

@keyframes loading {
  0%,
  60%,
  100% {
    background-color: #EEEEEE;
    border-color: #D8D8D8;
    transform: scaleY(1);
  }
  30% {
    background-color: #4A4A4A;
    border-color: #000000;
    transform: scaleY(1.3);
  }
}

Continue reading here: New types of element input in HTML5

Was this article helpful?

0 0