Release

client/core/spin/_skin/spin_skin_common.styl

@@ -0,0 +1,50 @@
+spin_skin_common() {
+
+  & {
+      display: inline-block;
+
+      box-sizing: border-box;
+
+      border: 2px solid transparent;
+      border-radius: 100px;
+      /*
+       * Поддержка CSS анимаций и CSS градиентов у основных браузеров совпадает
+       * Если браузер не поддерживает градиенты, будет показана gif-анимация
+       */
+      background-image: url(images/spin.gif);
+      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+  }
+
+  /* Для правильного позиционирования прелоадера относительно baseline */
+  &:after {
+      visibility: hidden;
+
+      content: '\00A0'; /*   */
+  }
+
+  &._progressed {
+      display: inline-block;
+
+      animation: spin 1s infinite linear;
+      backface-visibility: hidden;  /* Для ускорения анимации */
+  }
+
+  @keyframes spin
+  {
+      from
+      {
+          border-top-color: #fc0;
+          border-left-color: #fc0;
+
+          transform: rotate(0deg);
+      }
+      to
+      {
+          border-top-color: #fc0;
+          border-left-color: #fc0;
+
+          -webkit-transform: rotate(360deg);
+                  transform: rotate(360deg);
+      }
+  }
+}

client/core/spin/_skin/spin_skin_size-l.styl

@@ -0,0 +1,9 @@
+spin_skin_size-l() {
+    width: 38px;
+    height: 38px;
+
+    font-size: 18px;
+    line-height: 34px;
+
+    background-position: -2px -106px;
+}

client/core/spin/spin.bt.js

@@ -0,0 +1,7 @@
+module.exports = function (bt) {
+   bt.setDefaultView('spin', 'default');
+
+   bt.match('spin_default*', function (ctx) {
+      ctx.setState('progressed');
+   });
+};

client/core/spin/spin.deps.yaml

@@ -0,0 +1 @@
+- view: default

client/core/spin/spin.js

@@ -0,0 +1,38 @@
+modules.define(
+    'spin',
+    [
+        'y-block',
+        'inherit'
+    ],
+    function (
+        provide,
+        YBlock,
+        inherit
+    ) {
+
+    var Spin = inherit(YBlock, {
+        __constructor: function () {
+            this.__base.apply(this, arguments);
+        },
+        /**
+         * Останаваливает анимацию спиннера
+         */
+        stop: function () {
+            this._removeState('progressed');
+        },
+
+        /**
+         * Запускает анимацию спиннера
+         */
+        start: function () {
+            this._setState('progressed');
+        }
+
+    }, {
+        getBlockName: function () {
+            return 'spin';
+        }
+    });
+
+    provide(Spin);
+});

client/core/spin/spin_default-large.styl

@@ -0,0 +1,4 @@
+.spin_default-large {
+  spin_skin_common();
+  spin_skin_size-l();
+}

client/core/spin/spin_view.deps.yaml

@@ -0,0 +1,2 @@
+- skin: '*'
+  required: true