Круговые диаграммы: прокачал

src/blocks-demo.html

@@ -1468,7 +1468,7 @@
         <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
         <div class="blocks-library__code">
           <pre class="code">
-            <code>&lt;div class="">20%&lt;/div></code>
+            <code>&lt;div class="pie-chart">20%&lt;/div></code>
           </pre>
         </div>
       </div>

src/blocks/pie-chart/pie-chart.js

@@ -11,6 +11,7 @@ document.addEventListener('DOMContentLoaded', function(){
   $$('.pie-chart').forEach(function(pie) {
     var p = pie.textContent;
     pie.style.animationDelay = '-' + parseFloat(p) + 's';
+    pie.setAttribute('data-percent', p)
   });
 
 });

src/blocks/pie-chart/pie-chart.scss

@@ -2,6 +2,9 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
+$text-color:                  hsl(0, 0%, 10%) !default;
+$font-size:                   14px !default;
+
 $gray-light:                  hsl(0, 0%, 60%) !default;
 $gray-lighter:                hsl(0, 0%, 80%) !default;
 
@@ -17,6 +20,7 @@ $gray-lighter:                hsl(0, 0%, 80%) !default;
   background: $gray-lighter;
   background-image: linear-gradient(to right, transparent 50%, $gray-light 0);
   color: transparent;
+  font-size: 0;
   text-align: center;
 
   &:before {
@@ -34,6 +38,24 @@ $gray-lighter:                hsl(0, 0%, 80%) !default;
     animation-delay: inherit;
   }
 
+  &:after {
+    content: attr(data-percent);
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    width: 60%;
+    height: 60%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background-color: #fff;
+    font-size: $font-size;
+    color: $text-color;
+  }
+
   @keyframes pie-chart-spin {
 
     to {