A Pen by Ritchie.

index.html

<div id="box"></div>

script.js

function appr(goal, current, time){
  if(current < goal){
    return current + time;
  }else{
    return goal;
  }
}  

function point(x, y){
  this.x = x;
  this.y = y;
}

var box = document.getElementById('box');

var crp = new point(0.0, 0);
var p = new point(1.0, 100);

setInterval(function(){

  crp.x = appr(p.x, crp.x, 0.015);
  crp.y = appr(p.y, crp.y, 1.5);
  box.style.opacity = crp.x;
  box.style.width = crp.y+"%";
}, 1000/60);

style.css

body { margin: 0; background: #1F1F1F;}

#box {
  background: #A55;
  width: 500px;
  height: 5px;
  opacity: 0;
}

Youtube-page-load-effect.markdown

Youtube page load effect

I used a linear interpolation function to achieve this effect. It could be done so much simpeler but hey, Math!

A Pen by Ritchie on CodePen.

License.