media player progress mode

by Felis Catus

HTML

<span class="bebas"> text </span>
<div class="mediaplayer inactive">
    <div id="loadbar">
       <div id="loadcancel">
           Cancel
        </div>
        <div id="loadstatus">
            tormenting pears
        </div>
       <div id="loadprogress">
           <div id="bubble">
               <svg viewBox="0 0 70 51" width="70px" height="51px">
                   <defs>
                        <filter id="dropshadow" height="130%">
                            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
                            <feOffset dx="0" dy="0" result="offsetblur"/>
                            <feComponentTransfer>
                                <feFuncA type="linear" slope="0.4"/>
                            </feComponentTransfer>
                            <feMerge> 
                                <feMergeNode/>
                                <feMergeNode in="SourceGraphic"/>
                            </feMerge>
                       </filter>
                   </defs>
                   <path d="M54.7,10.2h-40c-2.8,0-5,2.2-5,5v20c0,2.8,2.2,5,5,5h13l5.9,7.5c0.6,0.7,1.6,0.7,2.2,0l5.9-7.5h13   c2.8,0,5-2.2,5-5v-20C59.7,12.4,57.4,10.2,54.7,10.2z" filter="url(#dropshadow)" />
                   <text text-anchor="middle" x="35" y="32" id="loadpercent">146%</text>
               </svg>
           </div>
           <div id="load-bar">
           </div>
        </div>
    </div>
    <div id="controlbar">
        <div class="control button">
            <svg height="50px" width="50px" viewBox="0 0 50 50">
                <path d="M19.3,16.1l12.3,8.1c0.5,0.3,0.5,1.1,0,1.4l-12.3,8.1c-0.6,0.4-1.3,0-1.3-0.7V16.9  C18,16.2,18.8,15.8,19.3,16.1z" />
            </svg>
        </div>
        <div class="control progressbar">
            <svg id="progress" height="50px" viewBox="0 0 50 50" preserveAspectRatio="none" >
                <path d="m 0,25 50,0" />
            </svg>
            <svg height="50px" width="50px" viewBox="0 0 50 50">
  ...

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
@font-face {
    font-family: "bebasneue";
    font-style: normal;
    font-weight: 400;
    src:...

JavaScript

(function setEvents(){
    var mediaplayer=document.getElementsByClassName("mediaplayer")[0];
    var mediaActive=0;
    var gettingReady=0;
    var currentPercent=0;
    var percentSteps=[];
    function setLoadPercent(percent){
        document.getElementById("load-bar").style.width=percent+'%';
        document.getElementById("bubble").style.marginLeft=percent+'%';
        document.getElementById("loadpercent").innerHTML=percent+'%';
        currentPercent=percent;
    }
    function easeLoadPercent(percent){
        percent=parseInt(percent);
        if(percentSteps.length){
            var last=percentSteps.pop();
        }else{
            last=currentPercent;
            var easeInterval=setInterval(function nextStep(){
                if(percentSteps.length)setLoadPercent(percentSteps.shift());
                else clearInterval(easeInterval);
            },20);
        }
        var dP=(last<percent)?1:-1;
        for(var i=last;i!=percent;i+=dP){
           percentSteps.push(i);
        }
        percentSteps.push(percent);
    }
    mediaplayer.onclick=function(){
        mediaActive=(1-mediaActive);
        if(mediaActive){
            mediaplayer.classList.remove("inactive");
            mediaplayer.classList.add("active");
            setLoadPercent(0);
            if(!gettingReady){
                gettingReady=setTimeout(function(){
                    mediaplayer.classList.add("ready");
                    gettingReady=0;
                },10000);
                setTimeout(function(){
                    easeLoadPercent(35);
                },1000);
                setTimeout(function(){
                    easeLoadPercent(65);
                },4000);
                setTimeout(function(){
                    easeLoadPercent(85);
                },4100);
                setTimeout(function(){
                    easeLoadPercent(25);
                },8100);
                
            }
            
        }else{
           ...