Добавил loader

package.json

@@ -37,7 +37,8 @@
       "form": [],
       "dropdown": [],
       "menu": [],
-      "label": []
+      "label": [],
+      "loader": []
     },
     "addCssBefore": [
       "./src/scss/variables.scss",

src/blocks-demo.html

@@ -1192,6 +1192,25 @@
 
     </section>
 
+    <section class="blocks-library__item" id="loader" data-name=".loader">
+
+      <h2 class="blocks-library__item-title">Загрузчик</h2>
+
+      <p>
+        <span class="loader"></span>
+      </p>
+
+      <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;span class="loader">&lt;/span></code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
   </div>
 
   <style>

src/blocks/loader/loader.less

-// Для импорта в диспетчер подключений: @import './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="30" height="30" viewBox="0 0 30 30"><path d="M15 0A15 15 0 0 0 0 15a15 15 0 0 0 15 15 15 15 0 0 0 15-15h-1.707c0 3.48-1.432 6.938-3.893 9.398-2.46 2.46-5.92 3.895-9.4 3.895-3.48 0-6.94-1.434-9.4-3.895C3.14 21.938 1.707 18.48 1.707 15c0-3.48 1.432-6.94 3.893-9.4 2.46-2.46 5.92-3.893 9.4-3.893V0z" fill="@{gray-light}"/><path d="M15 0v1.707c3.48 0 6.94 1.432 9.4 3.893 2.46 2.46 3.893 5.92 3.893 9.4H30A15 15 0 0 0 15 0z" fill="@{gray}"/></svg>');
-    background-image: url('data:image/svg+xml,@{svg}');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    background-position: center;
-    animation: loader-rotate 1s linear infinite;
-  }
-}
-
-
-
-@keyframes loader-rotate {
-
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}

src/blocks/loader/loader.scss

+// В этом файле должны быть стили только для БЭМ-блока loader, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
+
+.loader {
+  display: inline-block;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 1.2em;
+    height: 1.2em;
+    border: 3px solid $gray-lightest;
+    border-top: 3px solid $gray-lighter;
+    border-radius: 50%;
+    animation: loader-rotate 1s linear infinite;
+  }
+}
+
+
+
+@keyframes loader-rotate {
+
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}