Добавил круговые диаграммы

projectConfig.json

@@ -55,7 +55,8 @@
     "close": [],
     "tabs": [],
     "object-fit-polyfill": [],
-    "embed-responsive": []
+    "embed-responsive": [],
+    "pie-chart": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",
@@ -93,4 +94,4 @@
     "buildPath": "./build/",
     "blocksDirName": "blocks"
   }
-}
+}
\ No newline at end of file

src/blocks-demo.html

@@ -1431,7 +1431,7 @@
 
     </section>
 
-    <section class="blocks-library__item  blocks-library__item--menusep" id="embed-responsive" data-name=".embed-responsive">
+    <section class="blocks-library__item" id="embed-responsive" data-name=".embed-responsive">
 
       <h2 class="blocks-library__item-title">Адаптирующийся медиаконтент</h2>
 
@@ -1454,6 +1454,27 @@
 
     </section>
 
+    <section class="blocks-library__item  blocks-library__item--menusep" id="pie-chart" data-name=".pie-chart">
+
+      <h2 class="blocks-library__item-title">Круговые диаграммы</h2>
+
+      <div class="pie-chart">0%</div>
+      <div class="pie-chart">20%</div>
+      <div class="pie-chart">40%</div>
+      <div class="pie-chart">90%</div>
+      <div class="pie-chart">80%</div>
+
+      <div class="blocks-library__code-wrapper">
+        <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>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
 
 
 

src/blocks/pie-chart/pie-chart.html

+<!--DEV
+
+Для использования этого файла как шаблона:
+
+@ @include('blocks/pie-chart/pie-chart.html')
+
+(Нужно убрать пробел между символами @)
+Подробнее: https://www.npmjs.com/package/gulp-file-include
+
+
+
+<div class="pie-chart">20%</div>
+
+-->

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

+document.addEventListener('DOMContentLoaded', function(){
+
+  // Автор кода — Лия Веру
+
+  function $$(selector, context) {
+    context = context || document;
+    var elements = context.querySelectorAll(selector);
+    return Array.prototype.slice.call(elements);
+  }
+
+  $$('.pie-chart').forEach(function(pie) {
+    var p = pie.textContent;
+    pie.style.animationDelay = '-' + parseFloat(p) + 's';
+  });
+
+});

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

+// В этом файле должны быть стили для БЭМ-блока pie-chart, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
+
+$gray-light:                  hsl(0, 0%, 60%) !default;
+$gray-lighter:                hsl(0, 0%, 80%) !default;
+
+.pie-chart {
+
+  $block-name:                &; // #{$block-name}__element
+
+  display: inline-block;
+  position: relative;
+  width: 100px;
+  line-height: 100px;
+  border-radius: 50%;
+  background: $gray-lighter;
+  background-image: linear-gradient(to right, transparent 50%, $gray-light 0);
+  color: transparent;
+  text-align: center;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 50%;
+    height: 100%;
+    border-radius: 0 100% 100% 0 / 50%;
+    background-color: inherit;
+    transform-origin: left;
+    animation: pie-chart-spin 50s linear infinite, pie-chart-bg 100s step-end infinite;
+    animation-play-state: paused;
+    animation-delay: inherit;
+  }
+
+  @keyframes pie-chart-spin {
+
+    to {
+      transform: rotate(0.5turn);
+    }
+  }
+
+  @keyframes pie-chart-bg {
+
+    50% {
+      background: $gray-light;
+    }
+  }
+}