media player buffering

by Felis Catus

HTML

<span class="instr">Click spinner to display progress</span>
<div class="container">
    <div class="spinner back">
        <svg width="100%" height="100%" viewBox="-1 -1 202 202">
            <path id="rail" d="M 180,100 A 80,80 0 0,1 100,180 A 80,80 0 0,1 20,100 A 80,80 0 0,1 100,20 A 80,80 0 0,1 180,100" style="fill:none"/>
        </svg>
    </div>
    
    <div class="spinner fore">
        <svg width="100%" height="100%" viewBox="-1 -1 202 202">
            <path id="spincircle" d="M 1,100" style="fill:none"/>
        </svg>
    </div>
      
</div>
<div class="buffering">Buffering</div>

CSS

@font-face {
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 400;
    src: local("PT Sans"), local("PTSans-Regular"), url("http://fonts.gstatic.com/s/ptsans/v8/LKf8nhXsWg5ybwEGXk8UBQ.woff") format("woff");
}
@keyframes buf-fade {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}
@-webkit-keyframes buf-fade {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}
/*colors*/
#spincircle{
    stroke:#3fb1e5; 
    stroke-width:9; 
    stroke-linecap:round;
}
#rail{
    stroke:#3fb1e5; 
    stroke-width:5;
    stroke-opacity:0.5;
}

.container{
    background:transparent;
}

/*for example only. container has to be square.*/
body{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url("http://www.traipse.com/penrose_tiles/penrose_tiles.gif");
}
.instr{
    text-shadow:0 0 2px white,0 0 2px white;
}

.container{
    width:200px;
    height:200px;
    margin:100px 100px;
}
.buffering{
    width:200px;
    text-align:center;
    margin:0 100px 0;
    position:relative;
    top:-220px;
    overflow: hidden;
	font: bold 30px 'PT Sans', sans-serif;
	color: #3fb1e5;
    animation: buf-fade 2s infinite;
    -webkit-animation: buf-fade 2s infinite;
}
/*structure - don't touch*/
.container{
    position:relative;
    overflow:hidden;
}
.spinner{
    position:absolute;
    background:inherit;
    width:100%;
    height:100%;
    margin:50% 0 0 50%;
    top:-50%;
    left:-50%;
    transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    border-radius:50%;
    /*box-shadow:0 0 2px red inset;*/
}

JavaScript

(function setEvents(){
    var clicked=0;
    var intId=0;
    var int2Id=0;
    var aperture=10;
    var angle=0;
    var dAperture=1.5;
    var dAngle=8;
    var transformFunc=((/^((?!chrome).)*safari/i.test(navigator.userAgent))?"-webkit-transform":"transform");
    
    var arc=document.getElementById("spincircle");
    var spinner=document.getElementsByClassName("fore")[0];
    var bubble=document.getElementsByClassName("bubble")[0];
    function setAperture(ang){
        ang%=360;
        var ex=100+(80*Math.cos(6.28318531*ang/360.0));
        var ey=100+(80*Math.sin(6.28318531*ang/360.0));
        if(ang<=90){
            arc.setAttribute("d","M 180,100 A 80,80 0 0,1 "+ex+","+ey);
        }else if(ang<=180){
            arc.setAttribute("d","M 180,100 A 80,80 0 0,1 100,180 A 80,80 0 0,1 "+ex+","+ey);
        }else if(ang<=270){
            arc.setAttribute("d","M 180,100 A 80,80 0 0,1 100,180 A 80,80 0 0,1 20,100 A 80,80 0 0,1 "+ex+","+ey);
        }else{
            arc.setAttribute("d","M 180,100 A 80,80 0 0,1 100,180 A 80,80 0 0,1 20,100 A 80,80 0 0,1 100,20 A 80,80 0 0,1 "+ex+","+ey);
        }
    }
    
    
document.getElementsByClassName("fore")[0].onclick=function spinnerClick(evt){
    if(clicked){
        clicked=0;
        clearInterval(intId);
        setAperture(0);
        clearInterval(int2Id);
        angle=0;
        aperture=52;
    }else{
        clicked=1;
        intId=setInterval(function(){
            if(aperture<=50){
                aperture=50;
                dAperture=-dAperture;
            }else if(aperture>300){
                dAperture=-dAperture;
                aperture=300;
                
            }
            setAperture(aperture);
            aperture=(aperture+dAperture)%360;
        },40);
        int2Id=setInterval(function(){
            spinner.style[transformFunc]="rotate("+angle+"deg)";
            angle=(angle+dAngle)%360;
        },40);
    }
}
}());