<div class="loading">
  <div class="clock hours">    
    <div class="left"><div></div></div>
    <div class="right"><div></div></div>
    <div class="progress"><span>0</span></div>
  </div>
  <div class="clock minutes">    
    <div class="left"><div></div></div>
    <div class="right"><div></div></div>
    <div class="progress"><span>0</span></div>
  </div>
  <div class="clock seconds">    
    <div class="left"><div></div></div>
    <div class="right"><div></div></div>
    <div class="progress"><span>0</span></div>
  </div>
</div>

*{margin: 0; padding: 0;}
  .loading{margin:100px auto; width: 25em; height: 8em; position: relative;}
  .clock{position: relative; width: 8em; height: 8em; display: inline-block;}
  .loading .progress{position: absolute; width: 6em; height:6em; background-color: white; border-radius: 50%; left: 1em; top: 1em; line-height: 6em; text-align: center;
  }
  .progress span{ font: 50px/2em Arial;}
  .left,.right{width: 4em;height: 8em;overflow: hidden; position: relative; float: left;}
  .left{ border-radius: 8em 0 0 8em;}
  .right{ border-radius: 0 8em 8em 0;}
  .left div,.right div{content:"";  position:absolute; display:block; width: 4em;height: 8em; background-color: white;border-radius: 8em 0 0 8em; transition:all .3s; transform-origin:right center; transform:rotateZ(-180deg);}
  .right div{content:"";  position:absolute; display:block;   border-radius: 0 8em 8em 0;transform-origin:left center; }
  .clock:nth-child(1) .left div,.clock:nth-child(1) .right div{
    background-color: #4CAF4F;
  }
  .clock:nth-child(2) .left div,.clock:nth-child(2) .right div{
    background-color: #02A3EC;
  }
  .clock:nth-child(3) .left div,.clock:nth-child(3) .right div{
    background-color: #FBC02E;
  }

/*
  by:王美建 CSS3 时钟
*/
  setInterval(function(){
    var time = new Date(),
        H = time.getHours(),
        M = time.getMinutes(),
        S = time.getSeconds();
    showHours("hours",H,12);
    showHours("minutes",M,30);
    showHours("seconds",S,30);
  },30)

  function showHours(oClass,num,n){
    var aEle = getByClass(oClass)[0].children,
        Rdeg = num > n ? n : num,
        Ldeg = num > n ? num - n : 0;
    aEle[2].innerHTML = "<span>"+num+"</span>";

    aEle[1].children[0].style.transform = "rotateZ("+ (360/(2*n)*Rdeg-180) +"deg)";
    aEle[0].children[0].style.transform = "rotateZ("+ (360/(2*n)*Ldeg-180) +"deg)";
  }
  function getByClass(oClass){
    return document.getElementsByClassName(oClass);
  }