CSS radial progress bar - Prettifying

by basti1012

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<div class="alles">





<div class="radial-progress">
    <div class="circle">
        <div class="mask full">
            <div class="fill"></div>
        </div>
        <div class="mask half">
            <div class="fill"></div>
            <div class="fill fix"></div>
        </div>
      
    </div>
 
</div>
 




<div class="radial-progress1">
    <div class="circle1">
        <div class="mask1 full1">
            <div class="fill1"></div>
        </div>
        <div class="mask1 half1">
            <div class="fill1"></div>
            <div class="fill1 fix1"></div>
        </div>
    
    </div>

</div>







<div class="radial-progress2">
    <div class="circle2">
        <div class="mask2 full2">
            <div class="fill2"></div>
        </div>
        <div class="mask2 half2">
            <div class="fill2"></div>
            <div class="fill2 fix2"></div>
        </div>
    
    </div>

</div>

<div id="mitte"><div id="time"></div></div>



</div>

CSS

.alles{
position:absolute;
top:10px;
left:10px;
  
  

}
#mitte{
position:absolute;
height:101px;
width:101px;
top:150px;
left:150px;
z-index:30;
 
 background-color:yellow;
  border-radius:50%;
border:1px solid black;
}


.radial-progress {
    @circle-size: 400px;
    @circle-background:transparent;
    @circle-color:red;
    @inset-size: 5px;
    @inset-color:black;
    position:absolute;
    z-index:5;
 top:0px;
 left:0px;
 
  
    width: @circle-size;
    height: @circle-size;
    background-color: @circle-background;
    border-radius: 50%;
    .circle {
        .mask, .fill,   {
            width: @circle-size;
            height: @circle-size;
            position: absolute;
            border-radius: 50%;
        }
 
        .mask, .fill {
            -webkit-backface-visibility: hidden;
 
            transition: transform 1s;
        }
        .mask {
            clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
            .fill {
                clip: rect(0px, @circle-size/2, @circle-size, 0px);
                background-color: @circle-color;
            }
        }
    }

}








.radial-progress1 {
    @circle-size1: 350px;
    @circle-background1:transparent;
    @circle-color1:green;
    @inset-size1: 5px;
    @inset-color1:black;
    position:relative;
 top: 30px;
 left: 30px;
 z-index:10;
    //margin: 50px;
    width: @circle-size1;
    height: @circle-size1;
    background-color: @circle-background1;
    border-radius: 50%;
    .circle1 {
        .mask1, .fill1,   {
            width: @circle-size1;
            height: @circle-size1;
            position: absolute;
            border-radius: 50%;
        }
 
        .mask1, .fill1 {
            -webkit-backface-visibility: hidden;
 
            transition: transform 1s;
        }
        .mask1 {
            clip: rect(0px, @circle-size1, @circle-size1, @circle-size1/2);
            .fill1 {
                clip: rect(0px, @circle-size1/2, @circle-size1, 0px);
               ...

JavaScript

function zeit(){
 var jetzt = new Date();
  var Stunde = jetzt.getHours();
  var Std = ((Stunde < 10) ? "0" + Stunde : Stunde);
  if(Std>12 && Std<24){
  var Std =Std-12;
  }
  var Minuten = jetzt.getMinutes();
  var Min = ((Minuten < 10) ? "0" + Minuten : Minuten);
  var Sek = jetzt.getSeconds();
  var sek = ((Sek < 10) ? "0" + Sek : Sek);
  var time = ''+Std+':'+Min+':'+sek+'';
 return {se: sek, mi: Min, st: Std,};
}
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();

function sekunden(){
       var zuruck =  zeit()
       var se =zuruck.se 
       var mi = zuruck.mi
       var st = zuruck.st
       var minplus=mi/2;
       var minplus=minplus.toFixed(0);
    var stunderotate=st*30+parseInt(minplus);
    var sekundenrotate=se*6;
   var minutenrotate=mi*6;
   document.getElementById('time').innerHTML='<br><br><center>'+st+'-'+mi+'-'+se+'</center>'
$('.radial-progress').css('transform', 'rotate('+sekundenrotate+'deg)');
 $('.radial-progress1').css('transform', 'rotate('+minutenrotate+'deg)');
 
  $('.radial-progress2').css('transform', 'rotate('+stunderotate+'deg)');
 
 
$('.circle .fill, .circle .mask.full').css('transform', 'rotate(6deg)');
        
        $('.circle1 .fill1, .circle1 .mask1.full1').css('transform', 'rotate(6deg)');
        
        
            $('.circle2 .fill2, .circle2 .mask1.full2').css('transform', 'rotate(6deg)');    
        
        
        
        
     }
  window.setInterval(function (){  sekunden()  }, 1000);