Home / Articles / Programming languages / Markup languages / HTML & CSS / Responsive animated loader using only CSS3: three fading blocks with passing wave effect

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

Responsive animated loader using only CSS3: three fading blocks with passing wave effect
 
Responsive animated loader using only CSS3: three fading blocks with passing wave effect
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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:

<div class="loader"><i></i></div>

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);
  }
}

Live demo

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

The following archive contains all the examples above:


 

Read also

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation