#body {
    background: #000;
}

#canvas {
    background: #181818;
    box-shadow: 0 0 0 1px #282828;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
<script>
var canvas = document.createElement( 'canvas' ),
    ctx = canvas.getContext( '2d' ),
    width = 400,
    height = 100,
    loaded = 0,
    loaderSpeed = 0.6,
    loaderWidth = 310,
    loaderHeight = 16,
    loaderX = width / 2 - loaderWidth / 2,
    loaderY = height / 2 - loaderHeight / 2,
    particles = [],
    particleLift = 180,
    particleRate = 4,
    hueStart = 0,
    hueEnd = 120,
    hue = 0,
    gravity = 0.12,
    dpr = window.devicePixelRatio;

document.body.appendChild( canvas );
canvas.width = width;
canvas.height = height;
canvas.style.width = ( width / dpr ) + 'px';
canvas.style.height = ( height / dpr ) + 'px';
ctx.globalCompositeOperation = 'lighter';
                
function rand( rMi, rMa ) {
    return ~~((Math.random()*(rMa-rMi+1))+rMi);
}

function updateLoader() {
    if( loaded < 100 ) {
        loaded += loaderSpeed;
    } else {
        loaded = 0;
    }
}

function renderLoader() {
    ctx.fillStyle = '#000';
    ctx.fillRect( loaderX, loaderY, loaderWidth, loaderHeight );

    hue = hueStart + ( loaded / 100 ) * ( hueEnd - hueStart );

    var newWidth = ( loaded / 100 ) * loaderWidth;
    ctx.fillStyle = 'hsla(' + hue + ', 100%, 40%, 1)';
    ctx.fillRect( loaderX, loaderY, newWidth, loaderHeight );

    ctx.fillStyle = '#444';
    ctx.fillRect( loaderX, loaderY, newWidth, loaderHeight / 2 );
}

function Particle() {                   
    this.x = loaderX + ( ( loaded / 100 ) * loaderWidth ) - rand( 0, 1 );
    this.y = height / 2 + rand( 0, loaderHeight ) - loaderHeight / 2;
    this.vx = ( rand( 0, 4 ) - 2 ) / 100;
    this.vy = ( rand( 0, particleLift ) - particleLift * 2 ) / 100;
    this.width = rand( 1, 4 ) / 2;
    this.height = rand( 1, 4 ) / 2;
    this.hue = hue;
}

Particle.prototype.update = function( i ) {
    this.vx += ( rand( 0, 6 ) - 3 ) / 100; 
    this.vy += gravity;
    this.x += this.vx;
    this.y += this.vy;

    if( this.y > height ) {
        particles.splice( i, 1 );
    }                   
};

Particle.prototype.render = function() {
    ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + rand( 50, 70 ) + '%, ' + rand( 20, 100 ) / 100 + ')';
    ctx.fillRect( this.x, this.y, this.width, this.height );
};

function createParticles() {
    var i = particleRate;
    while( i-- ) {
        this.particles.push( new Particle() );
    }
}

function updateParticles() {                    
    var i = particles.length;                       
    while( i-- ) {
        var p = particles[ i ];
        p.update( i );                                          
    };                  
}

function renderParticles() {
    var i = particles.length;                       
    while( i-- ) {
        var p = particles[ i ];
        p.render();                                         
    }           
}

function clearCanvas() {
    ctx.clearRect( 0, 0, width, height );                   
}


function loop() {
    requestAnimationFrame( loop );
    clearCanvas();
    createParticles();
    updateLoader();
    updateParticles();
    renderLoader();
    renderParticles();
}

loop();
</script>