Добавил Загрузчик (блок с анимированным SVG)

src/blocks/loader/img_to_bg/loader.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" stroke="#ccc"><g transform="translate(2 2)" fill="none" fill-rule="evenodd" stroke-width="3"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></svg>
\ No newline at end of file

src/blocks/loader/loader.html

+<!--DEV
+
+<span class="loader"></span>
+
+-->

src/blocks/loader/loader.less

+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+.loader {
+
+  &:before {
+    content: '';
+    display: block;
+    width: 3em;
+    height: 3em;
+    // background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/loader/img_to_bg/loader.svg');
+    // ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
+    @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" stroke="@{gray-light}"><g transform="translate(2 2)" fill="none" fill-rule="evenodd" stroke-width="3"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></svg>');
+    background-image: url("data:image/svg+xml,@{svg}");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+  }
+}

src/blocks_library.html

@@ -4926,6 +4926,33 @@
 
 
 
+  <section class="blocks-library__item" id="loader" data-name=".loader">
+
+    <h1 class="blocks-library__item-title">Загрузчик</h1>
+
+    <p>Анимация прописана в самом SVG-файле, размещенном в фоне псевдоэлемента блока. Поскольку файл не кодируется в base64, в текст SVG-файла внедрена переменная с цветом.</p>
+
+    <div class="js-font-resizer">
+      <div class="p" style="min-height: 8em; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;">
+        <span class="loader"></span>
+      </div>
+    </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>
+          <code class="html">&lt;div style=&quot;min-height: 8em; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;&quot;&gt;</code>
+          <code class="html">  &lt;span class=&quot;loader&quot;&gt;&lt;/span&gt;</code>
+          <code class="html">&lt;/div&gt;</code>
+        </pre>
+      </div>
+    </div>
+
+  </section>
+
+
+
 </section>
 
 @@include('blocks/page-footer/page-footer.html')

src/less/style.less

@@ -70,3 +70,4 @@
 @import './src/blocks/alert/alert--icon.less';
 @import './src/blocks/alert/alert__close.less';
 @import './src/blocks/alert-area/alert-area.less';
+@import './src/blocks/loader/loader.less';