COOLBAR

by JamesKyle

HTML

<div id="coolbar">
    <div class="white" id="cb1"></div>
    <div class="white" id="cb2"></div>
    <div class="black" id="cb3"></div>
</div>

CSS

#coolbar {height: 15px;width: 100%;background-color: #0D41C6;}
#coolbar div {height: 15px; position: absolute; top: 10px;}
#coolbar .white {background:rgba(255, 255, 255, 0.25);}
#coolbar .black {background:rgba(0, 0, 0, 0.25);}

/*Positions & stuffs*/
#coolbar #cb1 {
    left: 20%; right: 40%; width: 40%;
    -webkit-transition: all 6s cubic-bezier(0.25, 0.1, 0.25, 1.0);}
#coolbar #cb2 {
    left: 80%; right: 0%; width: 20%;
    -webkit-transition: all 3s cubic-bezier(0.02, 0.2, 0.4, 1.0);}
#coolbar #cb3 {
    left: 40%; right: 50%; width: 30%;
    -webkit-transition: all 9s cubic-bezier(0.1, 0.6, 0.2, 1.0);}