Create Animated Vertical Loading Bar Using CSS3

Most of the web apps use progress bar animation to display user friendly data and page rendering. We use day to day app like Google, FaceBook, Youtube etc. They have user friendly accessible loading animation.

Create Facebook like loading bar animation using only HTML and CSS3

Read more about Animated Spinner Design and Layout.

Also, Checkout our Video Tutorial About Range Bar

First, We need to add HTML Semantic Code to Add Layout. Also, we need to provide the number of bars we want to display.

Here is the HTML Code to display Facebook Vertical Bar.

<!-- Facebook Loader -->
<div class="loader">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>

Now, we will add CSS3 to update HTML Loading Vertical bar with correct Animation.

Below is the CSS3 Code.

.loader {
  width: 32px;
  height: 32px;
}

.bar {
  background-color: #99aaca;
  border: 1px solid #96a6c9;
  float: left;
  margin-right: 4px;
  margin-top: 6px;
  width: 6px;
  height: 18px;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: loadingbar;
}

.loader .bar:nth-child(2) {
  animation-delay: 0.1s;
}

.loader .bar:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes loadingbar {
  0% {}

  10% {
    margin-top: 5px;
    height: 22px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }

  20% {
    margin-top: 0px;
    height: 32px;
    border-color: #d1d7e2;
    background-color: #c6ccda;
  }

  30% {
    margin-top: 1px;
    height: 30px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }

  40% {
    margin-top: 3px;
    height: 26px;
  }

  50% {
    margin-top: 5px;
    height: 22px;
  }

  60% {
    margin-top: 6px;
    height: 18px;
  }

  70% {}

  /* Missing frames will cause the extra delay */
  100% {}
}

Let’s see our implementation in action.