You can create a responsive, animated progress bars like in Windows 7 using pure CSS3. I haven’t used any image in this tutorial. Resize your browser window to see the responsiveness.

css3-progress-bar-like-Windows-7

HTML

<div class="bar">
     <div class="blue loader">
          <h3>Loading..</h3>
               <span class="inner">
               </span>
     </div>
</div>

CSS

Next, we’ll create the background for the loader. The animated portion will be a translucent overlay, so you can easily change the colour and background properties if you chose to do so later on. I’ve used a gradient background but this can easily be swapped out for a solid colour or background image.

.blue.loader, .inner{
     height:2.5em; 
     position:relative
}
h3{
     color: #fff; 
     position:absolute; 
     left:1em
}
.blue.loader {
     border:1px solid #bbb; 
     width:90%; 
     margin:0 auto;
     background: #b8e1fc; /* Old browsers */
     background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
     background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
}

Now comes the fun part. We’ll be creating the linear pattern with gradients and using @keyframes to animate the tile.

.loader .inner {
     animation:masked-animation 8s ease-in-out infinite;
     -moz-animation:masked-animation 8s ease-in-out infinite;
     -o-animation:masked-animation 8s ease-in-out infinite;
     -webkit-animation:masked-animation 8s ease-in-out infinite;
     background-image: linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.67) 48%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.67) 52%, rgba(255,255,255,0) 100%);
     background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.67) 48%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.67) 52%, rgba(255,255,255,0) 100%);
     background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.67) 48%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.67) 52%, rgba(255,255,255,0) 100%);
     background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.67) 48%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.67) 52%, rgba(255,255,255,0) 100%);
     background-position: -2000px 0;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     color: #fff;
     display: block;
}

@keyframes masked-animation {
     0% {background-position: -2000px 0}
     50% {background-position: 2000px 0}
     100% {background-position: 2000px 0}
}

@-webkit-keyframes masked-animation {
     0% {background-position: -2000px 0}
     50% {background-position: 2000px 0}
     100% {background-position: 2000px 0}
}

@-o-keyframes masked-animation {
     0% {background-position: -2000px 0}
     50% {background-position: 2000px 0}
     100% {background-position: 2000px 0}
}

@-moz-keyframes masked-animation {
     0% {background-position: -2000px 0}
     50% {background-position: 2000px 0}
     100% {background-position: 2000px 0}
}

Adjusting Size and Style

Since we’ve specified all our widths in percentages, it’s simple to adjust the fill anywhere from 0% to 100%.

Browser Compatibility:

As we mentioned before, this technology is developed with CSS, so it is supported by almost all major browsers. it is possible that the syntax and behavior can be changed in future versions of browsers.  Chrome and Safari requires the prefix -webkit- in css.  For today, it is supported by next browsers:

  • Chrome
  • Firefox
  • Safari
  • IE 10+
  • Opera

Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

That’s it!

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below! If you liked this article, please share it by clicking on the share bar below. I’d appreciate it…view demo

 

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!