CSS

【CSS】アニメーションプログレスサークルProgressCirclesCSS

February 2, 2017
ProgressCirclesCSS

ProgressCirclesCSSはCSSを使ったアニメーションプログレスサークル。

HTML

<div class="container">
  <div class="progress-circle progress-1"><span>1</span></div>  
  <div class="progress-circle progress-2"><span>2</span></div>  
  <div class="progress-circle progress-3"><span>3</span></div>  
  <div class="progress-circle progress-4"><span>4</span></div>  
  <div class="progress-circle progress-5"><span>5</span></div>   
  ...
  <div class="progress-circle progress-95"><span>95</span></div>
  <div class="progress-circle progress-96"><span>96</span></div>
  <div class="progress-circle progress-97"><span>97</span></div>
  <div class="progress-circle progress-98"><span>98</span></div>
  <div class="progress-circle progress-99"><span>99</span></div>  
  <div class="progress-circle progress-100"><span>100</span></div>  
</div>