使用jquery+CSS和HTML5实现简单的计时器进度条

直接上代码

  *{  
        margin: 0;  
        padding: 0;  
    }  
    .wrap,.circle,.percent{  
        position: absolute;  
        width: 146px;  
        height: 146px;  
        border-radius: 50%;  
    }  
  .wrap{  
        margin-top: 50px;
        margin-left: 50px;
    }  
    .circle{  
        box-sizing: border-box;  
        border:10px solid transparent;  
        clip:rect(0,146px,146px,73px);  /*裁剪区域*/
    }  
    .clip-auto{  
        clip:rect(auto, auto, auto, auto);  
    }  
    .percent{  
        box-sizing: border-box;  
        top:-10px;  
        left:-10px;  
    }  
    .left{  
        transition:transform ease;  
        border:10px solid pink;  
        clip: rect(0,73px,146px,0);  
    }  
    .right{  
        border:10px solid pink;  
        clip: rect(0,146px,146px,73px);  
    }  
    .wth0{  
        width:0;  
    }  
    .num{  
        position: absolute;  
        box-sizing: border-box;  
        text-align: center;  
        font-size: 16px;  
        left: calc(50% - 16px);
        top: calc(50% - 16px);
        border-radius: 50%;  
        background-color: #fff;  
        z-index: 1;  
    }  
    .circlr_trans{
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        left: calc(50% - 8px);
        top: -3px;
        background-color: red;
        transform-origin: 50% 76px; 
    }

  
    

        
  
        
        
    
  
    

    
0s
 
 

效果图