css - 如何在纯 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>