Поиск по этому блогу

понедельник, 19 августа 2013 г.

html5 круговой индикатор процесса

Круговой индикатор процесса который показывает процент заполнения. Установлен интервал в 42 секунды. Данный код можно просто скопировать и вставить себе в html документ, все будет работать.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
 type="text/javascript"></script>
<style>
.timer {
 position: relative;
 font-size: 200px;
 width: 1em;
 height: 1em;
 float: left;
}
 
.timer>.percent {
 position: absolute;
 top: 1.05em;
 left: 0;
 width: 3.33em;
 font-size: 0.3em;
 text-align: center;
}
 
.timer>#slice {
 position: absolute;
 width: 1em;
 height: 1em;
 clip: rect(0px, 1em, 1em, 0.5em);
}
 
.timer>#slice.gt50 {
 clip: rect(auto, auto, auto, auto);
}
 
.timer>#slice>.pie {
 border: 0.1em solid #c0c0c0;
 position: absolute;
 width: 0.8em; /* 1 - (2 * border width) */
 height: 0.8em; /* 1 - (2 * border width) */
 clip: rect(0em, 0.5em, 1em, 0em);
 -moz-border-radius: 0.5em;
 -webkit-border-radius: 0.5em;
 border-radius: 0.5em;
}
 
.timer>#slice>.pie.fill {
 -moz-transform: rotate(180deg) !important;
 -webkit-transform: rotate(180deg) !important;
 -o-transform: rotate(180deg) !important;
 transform: rotate(180deg) !important;
}
 
.timer.fill>.percent {
 display: none;
}
 
.timer.fill>#slice>.pie {
 border: transparent;
 background-color: #c0c0c0;
 width: 1em;
 height: 1em;
}
</style>
<script type="text/javascript">
 var timer;
 var timerCurrent;
 var timerFinish;
 var timerSeconds;
 function drawTimer(percent){
  $('div.timer').html(
          '<div class="percent"></div><div id="slice"'+
   (percent > 50?' class="gt50"':'')+
   '><div class="pie"></div>'+
   (percent > 50?'<div class="pie fill"></div>':'')+'</div>');
  var deg = 360/100*percent;
  $('#slice .pie').css({
   '-moz-transform':'rotate('+deg+'deg)',
   '-webkit-transform':'rotate('+deg+'deg)',
   '-o-transform':'rotate('+deg+'deg)',
   'transform':'rotate('+deg+'deg)'
  });
  $('.percent').html(Math.round(percent)+'%');
 }
 function stopWatch(){
  var seconds = (timerFinish-(new Date().getTime()))/1000;
  if(seconds <= 0){
   drawTimer(100);
   clearInterval(timer);
  }else{
   var percent = 100-((seconds/timerSeconds)*100);
   drawTimer(percent);
  }
 }
    $(document).ready(function(){    
  timerSeconds = 42;
  timerCurrent = 0;
  timerFinish = new Date().getTime()+(timerSeconds*1000);
  timer = setInterval('stopWatch()',50);  
 });
</script>
</head>
<body>
 <div class="timer">
</body>
</html>


Автор: на
Ярлыки:

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)