Loading Animation

by kadymov

HTML

<h1>Loading</h1>
<div class="pbar">
    <div class="bar">
        <div class="http://jsfiddle.net/#saveblick"></div>
        <canvas id="bg" width="250" height="30"></canvas>
    </div>
</div>

CSS

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), 
        url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

body {
    background: #BE1E2D;
    font-family: Pacifico;
}

h1 {
    color: #8F1722;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    margin: -100px 0 0 0;
    padding: 0;
    font-size: 40px;
    font-weight: normal;
    text-shadow: 0 1px 0 rgba(255, 200, 200, 0.2);
}

.pbar {
    width: 300px;
    height: 30px;
    background: #8F1722;
    border-radius: 30px;
    overflow: hidden;
    padding: 3px;
    
    position: absolute;
    margin: auto;
    top: 0; right: 0; bottom: 0; left: 0;
    
    border-bottom: 1px solid rgba(255, 200, 200, 0.4);
}

.bar {
    background: #f7941e;
    background: -moz-linear-gradient(top,  #f7941e 0%, #ed1c24 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7941e), color-stop(100%,#ed1c24));
    background: -webkit-linear-gradient(top,  #f7941e 0%,#ed1c24 100%);
    background: -o-linear-gradient(top,  #f7941e 0%,#ed1c24 100%);
    background: -ms-linear-gradient(top,  #f7941e 0%,#ed1c24 100%);
    background: linear-gradient(to bottom,  #f7941e 0%,#ed1c24 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7941e', endColorstr='#ed1c24',GradientType=0 );
    
    width: 200px;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 10px #a55, inset 0 0 3px #822;    
    box-sizing: border-box;
}

.blick {
    position: absolute;
    width: 94%;
    height: 50%;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.2);
    margin: 3px auto;
    left: 0; right: 0;
}

JavaScript

var canv = document.getElementById('bg'),
    ctx = canv.getContext('2d'),
    width = parseInt(canv.width);


function arc(ctx, x, y, r) {
    ctx.beginPath();
    
    ctx.shadowBlur = 5;
    ctx.shadowColor='#fee';
    
    ctx.arc(x, y, r, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'rgba(255, 210, 210, 0.3)';
    ctx.fill();
}

var bubbles = [];
for (var i = 0; i < 100; i++) {
    var r = Math.random() * 3 / 2;
    
    bubbles.push({
        x : Math.random() * width,
        y : 35 + Math.random() * 35,
        r : r,
        s : r
    });
}

function draw() {
    ctx.clearRect(0, 0, width, 30);
    
    for (var i = 0, len = bubbles.length; i < len; i++) {
        var bubble = bubbles[i];
        bubble.y -= bubble.s;
        if (bubble.y < -bubble.r) {
            bubble.x = Math.random() * width;
            bubble.y = 35;
            bubble.r = Math.random() * 3;
            bubble.s = bubble.r / 2;            
        }
        
        arc(ctx, bubble.x, bubble.y, bubble.r);
    }
    
    setTimeout(draw, 40);
}

draw();