純粋なCSSの円の中心にテキストを含む円形アニメーションを作成するにはどうすればいいですか？

Question

私はCSSの初心者だし、次のように作成する方法を把握しようとして狂気の時間を持つ：

円が100％を表し、緑色で満たされた62％に相当するであろう。これは単なるCSSでも可能ですか、作成するにはJavaScriptが必要ですか？

Answer 1

ここprogressbar.js

// progressbar.js@1.0.0 version is used 
 
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/ 
 

 
var bar = new ProgressBar.Circle(container, { 
 
    color: '#7ed321', 
 
    // This has to be the same size as the maximum width to 
 
    // prevent clipping 
 
    strokeWidth: 5, 
 
    trailWidth: 5, 
 
    trailColor: '#73787d', 
 
    easing: 'easeInOut', 
 
    duration: 1400, 
 
    text: { 
 
    autoStyleContainer: false 
 
    }, 
 
    from: { color: '#7ed321', width: 5 }, 
 
    to: { color: '#7ed321', width: 5 }, 
 
    // Set default step function for all animate calls 
 
    step: function(state, circle) { 
 
    circle.path.setAttribute('stroke', state.color); 
 
    circle.path.setAttribute('stroke-width', state.width); 
 

 
    var value = Math.round(circle.value() * 100); 
 
    if (value === 0) { 
 
     circle.setText(''); 
 
    } else { 
 
     circle.setText(value+'%'); 
 
    } 
 

 
    } 
 
}); 
 
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif'; 
 
bar.text.style.fontSize = '3rem'; 
 

 
bar.animate(62*0.01); // Number from 0.0 to 1.0 //currently set to 62%

#container { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    background: #454b52; 
 
    padding: 20px; 
 
}

<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css"> 
 
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> 
 
<div id="container"></div>

Answer 2

は純粋css-でデモを作成し

body { 
 
    background-color: #f5f5f5; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
 
} 
 
.page { 
 
    margin: 40px; 
 
} 
 
h1 { 
 
    margin: 40px 0 60px 0; 
 
} 
 
.dark-area { 
 
    background-color: #666; 
 
    padding: 40px; 
 
    margin: 0 -40px 20px -40px; 
 
    clear: both; 
 
} 
 
.clearfix:before, 
 
.clearfix:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.clearfix:after { 
 
    clear: both; 
 
} 
 
.clearfix { 
 
    *zoom: 1; 
 
} 
 
.rect-auto { 
 
    clip: rect(auto, auto, auto, auto); 
 
} 
 
.pie, 
 
.c100 .bar { 
 
    position: absolute; 
 
    border: 0.08em solid #307bbb; 
 
    width: 0.84em; 
 
    height: 0.84em; 
 
    clip: rect(0em, 0.5em, 1em, 0em); 
 
    border-radius: 50%; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 
.pie-fill { 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 
.c100 { 
 
    position: relative; 
 
    font-size: 120px; 
 
    width: 1em; 
 
    height: 1em; 
 
    border-radius: 50%; 
 
    float: left; 
 
    margin: 0 0.1em 0.1em 0; 
 
    background-color: #cccccc; 
 
} 
 
.c100 *, 
 
.c100 *:before, 
 
.c100 *:after { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
} 
 
.c100.center { 
 
    float: none; 
 
    margin: 0 auto; 
 
} 
 
.c100.big { 
 
    font-size: 240px; 
 
} 
 
.c100.small { 
 
    font-size: 80px; 
 
} 
 
.c100 > span { 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    width: 5em; 
 
    line-height: 5em; 
 
    font-size: 0.2em; 
 
    color: #cccccc; 
 
    display: block; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    -webkit-transition-property: all; 
 
    -moz-transition-property: all; 
 
    -o-transition-property: all; 
 
    transition-property: all; 
 
    -webkit-transition-duration: 0.2s; 
 
    -moz-transition-duration: 0.2s; 
 
    -o-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
    -webkit-transition-timing-function: ease-out; 
 
    -moz-transition-timing-function: ease-out; 
 
    -o-transition-timing-function: ease-out; 
 
    transition-timing-function: ease-out; 
 
} 
 
.c100:after { 
 
    position: absolute; 
 
    top: 0.08em; 
 
    left: 0.08em; 
 
    display: block; 
 
    content: " "; 
 
    border-radius: 50%; 
 
    background-color: #f5f5f5; 
 
    width: 0.84em; 
 
    height: 0.84em; 
 
    -webkit-transition-property: all; 
 
    -moz-transition-property: all; 
 
    -o-transition-property: all; 
 
    transition-property: all; 
 
    -webkit-transition-duration: 0.2s; 
 
    -moz-transition-duration: 0.2s; 
 
    -o-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
    -webkit-transition-timing-function: ease-in; 
 
    -moz-transition-timing-function: ease-in; 
 
    -o-transition-timing-function: ease-in; 
 
    transition-timing-function: ease-in; 
 
} 
 
.c100 .slice { 
 
    position: absolute; 
 
    width: 1em; 
 
    height: 1em; 
 
    clip: rect(0em, 1em, 1em, 0.5em); 
 
} 
 
.c100.p50 .bar { 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 
.c100:hover { 
 
    cursor: default; 
 
} 
 
.c100:hover > span { 
 
    width: 3.33em; 
 
    line-height: 3.33em; 
 
    font-size: 0.3em; 
 
    color: #307bbb; 
 
} 
 
.c100:hover:after { 
 
    top: 0.04em; 
 
    left: 0.04em; 
 
    width: 0.92em; 
 
    height: 0.92em; 
 
} 
 
.c100.dark { 
 
    background-color: #777777; 
 
} 
 
.c100.dark .bar, 
 
.c100.dark .fill { 
 
    border-color: #c6ff00 !important; 
 
} 
 
.c100.dark > span { 
 
    color: #777777; 
 
} 
 
.c100.dark:after { 
 
    background-color: #666666; 
 
} 
 
.c100.dark:hover > span { 
 
    color: #c6ff00; 
 
} 
 
.c100.green .bar, 
 
.c100.green .fill { 
 
    border-color: #4db53c !important; 
 
} 
 
.c100.green:hover > span { 
 
    color: #4db53c; 
 
} 
 
.c100.green.dark .bar, 
 
.c100.green.dark .fill { 
 
    border-color: #5fd400 !important; 
 
} 
 
.c100.green.dark:hover > span { 
 
    color: #5fd400; 
 
} 
 
.c100.orange .bar, 
 
.c100.orange .fill { 
 
    border-color: #dd9d22 !important; 
 
} 
 
.c100.orange:hover > span { 
 
    color: #dd9d22; 
 
} 
 
.c100.orange.dark .bar, 
 
.c100.orange.dark .fill { 
 
    border-color: #e08833 !important; 
 
} 
 
.c100.orange.dark:hover > span { 
 
    color: #e08833; 
 
}

<div class="page"> 
 

 

 

 

 

 
    <div class="dark-area clearfix"> 
 

 
    <!-- default --> 
 
    <div class="clearfix"> 
 

 
     <div class="c100 p50 big dark"> 
 
     <span>50%</span> 
 
     <div class="slice"> 
 
      <div class="bar"></div> 
 
      <div class="fill"></div> 
 
     </div> 
 
     </div> 
 

 

 
    </div> 
 
    <!-- /default --> 
 

 

 

 
    </div> 
 
    <!-- /.dark-area --> 
 
</div>