CSS3 Loading bar

17Jun2011

I decided I needed to refresh my memory on CSS3, so I coded a CSS only loading bar with animation. I've tested it under the latest release of firefox, chrome and opera.
Notice that there's no graphics at all loaded and not one snippet of javascript, CSS only. Test hovering over the bar!

Attached code:

123456789101112131415161718192021222324252627282930

/****************************************************************************

*

* File: loadingbar.html

* Using CSS3 to simulate a loading bar

*

****************************************************************************/

<html>

   <head>

      <title>Loading bar</title>

      <style type="text/css">

         div.container { position:relative; z-index:0; margin: 50px 0 0 50px; width:500px; height:25px; overflow:hidden; background:#ccc; border-radius:3px; box-shadow:0px 0px 10px #4d4d4d; border:1px solid #b2b2b2; }

         div.inner-shadow { position:absolute; top:0; left:0; z-index:2; width:500px; height:25px; box-shadow:inset 0 0 10px #ffffff; border-radius:3px; }

         div.hightlights { position:absolute; top:0; left:0; z-index:3; width:500px; height:12px; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, rgba(255,255,255,0.3)),color-stop(1, rgba(255,255,255,0.1))); background-image: -moz-linear-gradient( left bottom, rgba(255,255,255,0.3) 10%, rgba(255,255,255,0.1) 100%);background-image: -o-linear-gradient( left bottom, rgba(255,255,255,0.3) 10%, rgba(255,255,255,0.1) 100%);border-radius:3px 3px 0 0px;}

         div.loadingbar { position:absolute; top:0; left:0;z-index:1;width:0px; height:25px;background: #31af00; background-image: -webkit-gradient( linear, left top,left bottom, color-stop(0.2, rgba(255,255,255,0.1) ), color-stop(1, rgba(0,0,0,0.5) ) ); background-image: -moz-linear-gradient( top, rgba(255,255,255,0.1) 20%, rgba(0,0,0,0.5) 100%); background-image: -o-linear-gradient( rgba(255,255,255,0.1) 20%, rgba(0,0,0,0.5) 100%); border-radius:3px; box-shadow:inset 0 0 3px #4d4d4d; -o-transition: all 4s ease-out; -moz-transition: all 4s ease-out; -webkit-transition: all 4s ease-out; }

         /* Hover on the container element starts the animation on the loading bar */

         div.container:hover div.loadingbar { width:500px; background: #960007; background-image: -webkit-gradient( linear, left top,left bottom, color-stop(0.2, rgba(255,255,255,0.1) ), color-stop(1, rgba(0,0,0,0.5) ) ); background-image: -moz-linear-gradient( top, rgba(255,255,255,0.1) 20%, rgba(0,0,0,0.5) 100%); background-image: -o-linear-gradient( top  bottom, rgba(255,255,255,0.1) 20%, rgba(0,0,0,0.5) 100%); }

      </style>

   </head>

   <body>

      <!-- Div that contains all other objects -->

      <div class="container">

         <!-- Div that animates -->

         <div class="loadingbar"></div>

         <!-- Div that contains the inner shadow -->

         <div class="inner-shadow"></div>

         <!-- Div that contains the reflective highlight -->

         <div class="hightlights"></div>

      </div>

   </body>

</html>