Css3 Image Loader

Such Amazing CSS3 loader

Its  pure css based loader. Here is the code for it.

Here is html code

<div id="pbOverlay" class="thumbs hasArrows hasCounter hasAutoplay show on prev pbLoading">
        <div class="pbLoader">
            <b></b><b></b><b></b>
        </div>
    </div>

Here is Style (css) code

 <style type="text/css">
      /* PICBOX */
#pbOverlay.show{ opacity:1; pointer-events:auto; }
#pbOverlay{
    opacity:0; overflow:hidden; width:100%; height:100%; position:fixed; z-index:9999; left:0; top:0; text-align:center; pointer-events:none;
    -moz-user-select:none;
    background:rgba(0,0,0,0.85);
    background:radial-gradient(rgba(0,0,0,.6) 0%, rgba(0,0,0,.9) 100%);
    -webkit-transform:translate3d(0px, 0px, 0px);
    -webkit-transition:opacity 300ms ease;
    -ms-transition:opacity 300ms ease;
    transition:opacity 300ms ease;
}
#pbOverlay.msie{ background-color:rgba(0,0,0,.6); }
#pbOverlay.msie.pbLoading .wrapper{ background:url('../images/loading.gif') no-repeat center center; }

@keyframes pbLoaderFrames{ 50%{ height:5px; } }
@-webkit-keyframes pbLoaderFrames{ 50%{ height:5px; } }

#pbOverlay .pbLoader{ visibility:hidden; opacity:0; pointer-events:none; -webkit-transform:scale(.2); transform:scale(.2); position:absolute; z-index:999; top:50%; left:50%; margin:-50px 0 0 -50px; text-align:center; border-radius:100%; box-shadow:15px 32px 60px -20px #FFF inset, 1px 1px 3px 1px #FFF inset, 0 0 20px; width:100px; height:100px; transition:0.3s; -webkit-transition:0.2s; }
#pbOverlay.thumbs .pbLoader{ margin-top:-100px; }
#pbOverlay.pbLoading:not(.msie):not(.error) .pbLoader{ visibility:visible; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
    #pbOverlay .pbLoader b{ display:inline-block; vertical-align:middle; margin:0 2px; width:8px; height:60px; border-radius:5px; background:rgba(255,255,255,0.8); box-shadow:0 0 10px rgba(0,0,0,0.5); -webkit-animation:.9s pbLoaderFrames infinite linear; animation:.9s pbLoaderFrames infinite linear; }
    #pbOverlay .pbLoader b:nth-child(2){ -webkit-animation-delay:.3s; animation-delay:.3s; }
    #pbOverlay .pbLoader b:nth-child(3){ -webkit-animation-delay:.6s; animation-delay:.6s; }
#pbOverlay .pbLoader:before{ content:""; display:inline-block; height:100%; margin-right:-0.25em; vertical-align:middle; }

    </style>