CSS圈动画显示比例

Question

我有一个圆圈，我表示作为小提琴表现出中间的一些文本（JSFIDDLEhttp://jsfiddle.net/874jgh4v/2/）我的要求是这

1. 我需要动画百分比的外部白色边框例如如果百分比是50％，那么我需要显示该边框只有大约一半的圆圈

2. 我需要显示的百分比值例如文本50％应显示只有在喜欢动画的情况下。

.wrapper{padding:30px;} 
 

 
.circle{ 
 
    border-radius: 50%; 
 
    background:#32a500;  
 
    box-shadow: 0px 0px 0px 16px #f1f1f1; 
 
    border: 16px solid #f9f9f9; 
 
    width:220px; 
 
    height:220px; 
 
    box-sizing:border-box; 
 
} 
 

 
.circle:hover { 
 
    background:red;  
 
}

<div class="wrapper"> 
 
    <div class="circle"> 
 
     <p>Total ROE's</p> 
 
     <p>300</p> 
 
     <p>70%</p> 
 
    </div> 
 
</div>

任何帮助，将不胜感激！另外我更喜欢在没有外部库的情况下执行此操作，百分比应该支持小数点最多两点。

Answer 1

试试这个：

的Html

<span class='Progress'> 
    <div class="Bar"> 
     <div class="Outer"> 
      <div class="Fill"></div> 
     </div> 
     <div class="Draw"></div> 
     <div class="Status"><span></span></div> 
    </div>     
</span> 

CSS

.Progress { 
     position: absolute; 
     left: 25%; 
     bottom: 30%; 
    } 

     .Progress .Bar { 
      width: 70px; 
      height: 70px; 
      border-radius: 50%; 
      background-color: #E5E5E5; 
      position: relative; 
     } 

     .Progress .Bar .Outer { 
      content: ""; 
      position: absolute; 
      border-radius: 50%; 
      left: calc(50% - 35px); 
      top: calc(50% - 35px); 
      width: 70px; 
      height: 70px; 
      clip: rect(0, 70px, 70px, 35px); 
     } 

      .Bar .Outer .Fill { 
       content: ""; 
       position: absolute; 
       border-radius: 50%; 
       left: calc(50% - 35px); 
       top: calc(50% - 35px); 
       width: 70px; 
       height: 70px; 
       clip: rect(0, 35px, 70px, 0); 
       background: #00A0E3; 
       transform: rotate(60deg); 
      } 

     .Progress .Bar .Draw { 
      content: ""; 
      position: absolute; 
      border-radius: 50%; 
      left: calc(50% - 53.84615px/2); 
      top: calc(50% - 53.84615px/2); 
      width: 53.84615px; 
      height: 53.84615px; 
      background: #fff; 
      text-align: center; 
      display: table; 
     } 

     .Progress .Bar .Status { 
      display: table-cell; 
      vertical-align: middle; 
      position: absolute; 
      margin-left: -100px; 
      margin-top: -10px; 
      width: 200px; 
      height: 200px; 
      left: 50%; 
      top: 50%; 
      text-align: center; 
     } 

     .Progress .Bar .Status > span { 
      font-size: 14px; 
      font-weight: bold; 
      color: #00A0E3; 
     } 

     .Progress .Bar.halfway { 
      background-color: #00A0E3; 
     } 
      .Progress .Bar.halfway .Outer { 
       clip: rect(0, 35px, 70px, 0); 
      } 
       .Progress .Bar.halfway .Outer .Fill { 
        clip: rect(0, 70px, 70px, 35px); 
        background: #E5E5E5; 
       } 

      .Progress .Bar.complete.halfway, 
      .Progress .Bar.complete .Fill 
      { 
       background-color: #8cd64c !important; 
      } 

的JavaScript/JQuery的：

$('document').ready(function() { 

    var progress = function(perc) { 

     perc = Math.round(perc * 100)/100; // 2 decimal places 

     var $bar = $('.Progress .Bar'), 
      $fill = $('.Progress .Bar .Outer .Fill'), 
      $status = $('.Progress .Bar .Status span'); 

     $bar.removeClass("halfway").removeClass("complete"); 

     // outer bar 
     if (perc >= 50) $bar.addClass("halfway"); 
     if (perc >= 100) $bar.addClass("complete"); 

     // progress bar 
     var degrees = 360 * perc/100; 
     $fill.css({ 
      "WebkitTransform": 'rotate(' + degrees + 'deg)', 
      "-moz-transform": 'rotate(' + degrees + 'deg)' 
     }); 

     // status 
     $status.html(perc); 
    } 

    // Test it! 
    progress(10); 
    setTimeout(function() { 
     progress(50); 
     setTimeout(function() { 
     progress(100); 
     }, 2000); 
    }, 2000); 

}); 

Show me the CodePen