CSS круг анимации, чтобы показать процент

Question

у меня есть круг, и я хочу показать некоторый текст в середине, как показано на скрипке (JSFIDDLEhttp://jsfiddle.net/874jgh4v/2/) Мое требование это

1. Мне нужно анимировать внешняя белая граница для процента, например, если процент составляет 50%, тогда мне нужно показать, что граница только около половины круга

2. Мне нужно показать, что процентное значение на пасеке, например, должно отображаться 50% только на hower, желательно с некоторой анимацией.

.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