@kasko/fe-loading-indicator 2.0.0 → 2.0.1

package/dist/kasko-loader/kasko-loader.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 /**
  * This function is used by gulp to replace LESS variables
@@ -6,21 +6,11 @@
  */
 module.exports = function () {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var result = '<style title="li-loader">@keyframes spinner-loader{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.hidden{display:none}#kasko-loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500}#kasko-loader-wrapper:not(.li-loaded){background:"@overlaycolor";opacity:1}#kasko-loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:"@color1";animation:spin 2s linear infinite;z-index:1501}#kasko-loader::after,#kasko-loader::before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:"@color2";animation:spin 3s linear infinite}#kasko-loader::after{top:15px;left:15px;right:15px;bottom:15px;border-top-color:"@color3";animation:spin 1.5s linear infinite}#kasko-loader-wrapper .loader-section{position:fixed;top:0;width:50%;height:100%;z-index:1500;transform:translateX(0)}.li-loaded .loader-section{background:"@overlaycolor";opacity:.9}#kasko-loader-wrapper .loader-section.section-left{left:0}#kasko-loader-wrapper .loader-section.section-right{right:0}#kasko-loader-wrapper.li-loaded .loader-section.section-left{transform:translateX(-100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}#kasko-loader-wrapper.li-loaded .loader-section.section-right{transform:translateX(100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}.li-loaded #kasko-loader{opacity:0;transition:all .3s ease-out}#kasko-loader-wrapper.li-loaded{visibility:hidden}.spinner-loader:not(:requigray){animation:spinner-loader 1500ms infinite linear;border-radius:.5em;box-shadow:#025983 1.5em 0 0 0,#025983 1.1em 1.1em 0 0,#025983 0 1.5em 0 0,#025983 -1.1em 1.1em 0 0,#025983 -1.5em 0 0 0,#025983 -1.1em -1.1em 0 0,#025983 0 -1.5em 0 0,#025983 1.1em -1.1em 0 0;display:inline-block;font-size:10px;width:1em;height:1em;margin:1.5em;overflow:hidden;text-indent:100%}</style> <div id="kasko-loader-wrapper" class="hidden">   <div id="kasko-loader"></div>   <div class="loader-section section-left"></div>   <div class="loader-section section-right"></div> </div> <script>"use strict";function LoadingIndicator(){var o=this,t=null;function r(o){t||function(){for(var o=0;o<document.styleSheets.length;o+=1){var r=document.styleSheets.item(o);if("li-loader"===r.title){t=r;break}}}(),t&&t.insertRule(o)}function e(o){var t=RegExp("[?&]"+o+"=([^&]*)").exec(window.location.search);if(!t)return"";var r=decodeURIComponent(t[1].replace(/[+]/g," "));try{r=JSON.parse(r)}catch(o){}return r}this.init=function(){var t=e("loader_background_color"),r=e("loader_animation_colors"),n=document.getElementById("kasko-loader-wrapper");r&&o.setAnimationColors(r),t&&o.setBackdropColor(t),n&&n.classList.remove("hidden")},this.hide=function(){var o=document.getElementById("kasko-loader-wrapper");o&&o.classList.add("li-loaded")},this.setColors=function(t){o.setAnimationColors(t)},this.setAnimationColors=function(o){r("#kasko-loader{border-top-color:"+o[0]+"!important;}"),r("#kasko-loader::before{border-top-color:"+o[1]+"!important;}"),r("#kasko-loader::after{border-top-color:"+o[2]+"!important;}")},this.setBackdropColor=function(o){r("#kasko-loader-wrapper:not(.li-loaded){background:"+o+"!important;}"),r(".li-loaded .loader-section{background:"+o+"!important;}")}}var loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
-
-  if (!config.colors) {
-    config.colors = ['#ebbb2a', '#fff', '#a07c0f'];
-  }
-
-  if (!config.overlayColor) {
-    config.overlayColor = '#222';
-  }
-
-  config.colors.forEach(function (color, index) {
-    result = result.replace('\"@color' + (index + 1) + '\"', color);
+  var result = '<style title="li-loader">@keyframes spinner-loader{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.hidden{display:none}#kasko-loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500}#kasko-loader-wrapper:not(.li-loaded){background:"@overlaycolor";opacity:1}#kasko-loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:"@color1";animation:spin 2s linear infinite;z-index:1501}#kasko-loader::after,#kasko-loader::before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:"@color2";animation:spin 3s linear infinite}#kasko-loader::after{top:15px;left:15px;right:15px;bottom:15px;border-top-color:"@color3";animation:spin 1.5s linear infinite}#kasko-loader-wrapper .loader-section{position:fixed;top:0;width:50%;height:100%;z-index:1500;transform:translateX(0)}.li-loaded .loader-section{background:"@overlaycolor";opacity:.9}#kasko-loader-wrapper .loader-section.section-left{left:0}#kasko-loader-wrapper .loader-section.section-right{right:0}#kasko-loader-wrapper.li-loaded .loader-section.section-left{transform:translateX(-100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}#kasko-loader-wrapper.li-loaded .loader-section.section-right{transform:translateX(100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}.li-loaded #kasko-loader{opacity:0;transition:all .3s ease-out}#kasko-loader-wrapper.li-loaded{visibility:hidden}.spinner-loader:not(:requigray){animation:spinner-loader 1500ms infinite linear;border-radius:.5em;box-shadow:#025983 1.5em 0 0 0,#025983 1.1em 1.1em 0 0,#025983 0 1.5em 0 0,#025983 -1.1em 1.1em 0 0,#025983 -1.5em 0 0 0,#025983 -1.1em -1.1em 0 0,#025983 0 -1.5em 0 0,#025983 1.1em -1.1em 0 0;display:inline-block;font-size:10px;width:1em;height:1em;margin:1.5em;overflow:hidden;text-indent:100%}</style> <div id="kasko-loader-wrapper" class="hidden">   <div id="kasko-loader"></div>   <div class="loader-section section-left"></div>   <div class="loader-section section-right"></div> </div> <script>"use strict";function LoadingIndicator(){var o=this,t=null;function n(o){t||function(){for(var o=0;o<document.styleSheets.length;o+=1){var n=document.styleSheets.item(o);if("li-loader"===n.title){t=n;break}}}(),t&&t.insertRule(o)}function a(o){var t=RegExp("[?&]".concat(o,"=([^&]*)")).exec(window.location.search);if(!t)return"";var n=decodeURIComponent(t[1].replace(/[+]/g," "));try{n=JSON.parse(n)}catch(o){}return n}this.init=function(){var t=a("loader_background_color"),n=a("loader_animation_colors"),r=document.getElementById("kasko-loader-wrapper");n&&o.setAnimationColors(n),t&&o.setBackdropColor(t),r&&r.classList.remove("hidden")},this.hide=function(){var o=document.getElementById("kasko-loader-wrapper");o&&o.classList.add("li-loaded")},this.setColors=function(t){o.setAnimationColors(t)},this.setAnimationColors=function(o){n("#kasko-loader{border-top-color:".concat(o[0],"!important;}")),n("#kasko-loader::before{border-top-color:".concat(o[1],"!important;}")),n("#kasko-loader::after{border-top-color:".concat(o[2],"!important;}"))},this.setBackdropColor=function(o){n("#kasko-loader-wrapper:not(.li-loaded){background:".concat(o,"!important;}")),n(".li-loaded .loader-section{background:".concat(o,"!important;}"))}}var loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
+  var colors = config.colors || ['#ebbb2a', '#fff', '#a07c0f'];
+  colors.forEach(function (color, index) {
+    result = result.replace("\"@color".concat(index + 1, "\""), color);
   });
-
-  result = result.replace(/\"@overlaycolor\"/g, config.overlayColor);
+  result = result.replace(/"@overlaycolor"/g, config.overlayColor || '#222');
   return result;
 };

package/dist/spinner/spinner.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 /**
  * This function is used by gulp to replace LESS variables
@@ -6,13 +6,7 @@
  */
 module.exports = function () {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var result = '<style title="li-loader">@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.hidden{display:none}#kasko-loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500}#kasko-loader-wrapper svg{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;z-index:1501;animation:spin 1s linear infinite}#kasko-loader-wrapper:not(.li-loaded){background:"@overlaycolor";opacity:1}.li-loaded svg{opacity:0;transition:all .3s ease-out}#kasko-loader-wrapper.li-loaded{visibility:hidden}</style>  <div id="kasko-loader-wrapper" class="hidden">   <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->   <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">     <defs>       <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">         <stop stop-color="#fff" stop-opacity="0" offset="0%"/>         <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>         <stop stop-color="#fff" offset="100%"/>       </linearGradient>     </defs>     <g fill="none" fill-rule="evenodd">       <g transform="translate(1 1)">         <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2"></path>         <circle fill="#fff" cx="36" cy="18" r="1"></circle>       </g>     </g>   </svg> </div>  <script>"use strict";function LoadingIndicator(){var o=this,t=null;function n(o){t||function(){for(var o=0;o<document.styleSheets.length;o+=1){var n=document.styleSheets.item(o);if("li-loader"===n.title){t=n;break}}}(),t&&t.insertRule(o)}function r(o){var t=RegExp("[?&]"+o+"=([^&]*)").exec(window.location.search);if(!t)return"";var n=decodeURIComponent(t[1].replace(/[+]/g," "));try{n=JSON.parse(n)}catch(o){}return n}this.init=function(){var t=r("loader_background_color"),n=r("loader_animation_colors"),a=document.getElementById("kasko-loader-wrapper");if(n){var e="string"==typeof n?n:n[0];o.setAnimationColors(e)}t&&o.setBackdropColor(t),a&&a.classList.remove("hidden")},this.hide=function(){var o=document.getElementById("kasko-loader-wrapper");o&&o.classList.add("li-loaded")},this.setAnimationColors=function(o){n("#kasko-loader-wrapper svg stop{stop-color:"+o+"!important;}"),n("#kasko-loader-wrapper svg circle{fill:"+o+"!important;}")},this.setBackdropColor=function(o){n("#kasko-loader-wrapper:not(.li-loaded){background:"+o+"!important;}")}}var loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
-
-  if (!config.overlayColor) {
-    config.overlayColor = '#222';
-  }
-
-  result = result.replace(/\"@overlaycolor\"/g, config.overlayColor);
+  var result = '<style title="li-loader">@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.hidden{display:none}#kasko-loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500}#kasko-loader-wrapper svg{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;z-index:1501;animation:spin 1s linear infinite}#kasko-loader-wrapper:not(.li-loaded){background:"@overlaycolor";opacity:1}.li-loaded svg{opacity:0;transition:all .3s ease-out}#kasko-loader-wrapper.li-loaded{visibility:hidden}</style>  <div id="kasko-loader-wrapper" class="hidden">   <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->   <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">     <defs>       <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">         <stop stop-color="#fff" stop-opacity="0" offset="0%"/>         <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>         <stop stop-color="#fff" offset="100%"/>       </linearGradient>     </defs>     <g fill="none" fill-rule="evenodd">       <g transform="translate(1 1)">         <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2"></path>         <circle fill="#fff" cx="36" cy="18" r="1"></circle>       </g>     </g>   </svg> </div>  <script>"use strict";function LoadingIndicator(){var o=this,t=null;function n(o){t||function(){for(var o=0;o<document.styleSheets.length;o+=1){var n=document.styleSheets.item(o);if("li-loader"===n.title){t=n;break}}}(),t&&t.insertRule(o)}function a(o){var t=RegExp("[?&]".concat(o,"=([^&]*)")).exec(window.location.search);if(!t)return"";var n=decodeURIComponent(t[1].replace(/[+]/g," "));try{n=JSON.parse(n)}catch(o){}return n}this.init=function(){var t=a("loader_background_color"),n=a("loader_animation_colors"),r=document.getElementById("kasko-loader-wrapper");if(n){var e="string"==typeof n?n:n[0];o.setAnimationColors(e)}t&&o.setBackdropColor(t),r&&r.classList.remove("hidden")},this.hide=function(){var o=document.getElementById("kasko-loader-wrapper");o&&o.classList.add("li-loaded")},this.setAnimationColors=function(o){n("#kasko-loader-wrapper svg stop{stop-color:".concat(o,"!important;}")),n("#kasko-loader-wrapper svg circle{fill:".concat(o,"!important;}"))},this.setBackdropColor=function(o){n("#kasko-loader-wrapper:not(.li-loaded){background:".concat(o,"!important;}"))}}var loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
+  result = result.replace(/"@overlaycolor"/g, config.overlayColor || '#222');
   return result;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kasko/fe-loading-indicator",
   "shortname": "fe-loading-indicator",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Kasko frontend loading indicator",
   "license": "UNLICENSED",
   "main": "index.js",
@@ -15,22 +15,29 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-preset-env": "^1.7.0",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-plugin-import": "^2.12.0",
-    "gulp": "^3.9.1",
-    "gulp-babel": "^7.0.1",
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "axios": "^0.19.0",
+    "del": "^5.0.0",
+    "eslint": "^6.1.0",
+    "eslint-config-kasko-base": "^1.1.1",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
     "gulp-csso": "^3.0.0",
-    "gulp-less": "^3.3.2",
-    "gulp-minify": "^2.1.0",
-    "gulp-replace": "^0.6.1",
-    "run-sequence": "^2.2.0"
+    "gulp-less": "^4.0.1",
+    "gulp-minify": "^3.1.0",
+    "gulp-replace": "^1.0.0"
   },
   "scripts": {
     "build": "gulp",
-    "test": "npm run lint",
-    "lint": "eslint src/"
-  }
+    "test": "yarn lint",
+    "lint": "yarn lint:src && yarn lint:other",
+    "lint:src": "eslint src/ --env browser",
+    "lint:other": "eslint . --ignore-pattern src --ignore-pattern dist --ignore-pattern index.js --env node"
+  },
+  "files": [
+    "dist/*",
+    "index.js",
+    "README.md"
+  ]
 }

package/src/kasko-loader/loader.html

@@ -1,7 +0,0 @@
-<link rel="stylesheet" href="loader.css">
-<div id="kasko-loader-wrapper" class="hidden">
-  <div id="kasko-loader"></div>
-  <div class="loader-section section-left"></div>
-  <div class="loader-section section-right"></div>
-</div>
-<script href="loader.js"></script>

package/src/kasko-loader/loader.js

@@ -1,88 +0,0 @@
-function LoadingIndicator() {
-  let styleSheet = null;
-
-  function loadStyleSheet() {
-    for (let i = 0; i < document.styleSheets.length; i += 1) {
-      const styleSheetItem = document.styleSheets.item(i);
-
-      if (styleSheetItem.title === 'li-loader') {
-        styleSheet = styleSheetItem;
-        break;
-      }
-    }
-  }
-
-  function insertRule(rule) {
-    if (!styleSheet) {
-      loadStyleSheet();
-    }
-
-    if (styleSheet) {
-      styleSheet.insertRule(rule);
-    }
-  }
-
-  function getParameterByName(name) {
-    const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
-
-    if (!match) {
-      return '';
-    }
-
-    let decoded = decodeURIComponent(match[1].replace(/[+]/g, ' '));
-
-    // Attempt to json-decode
-    try {
-      decoded = JSON.parse(decoded);
-    } catch (e) {
-      // Do nothing..
-    }
-
-    return decoded;
-  }
-
-  this.init = () => {
-    const backdropColor = getParameterByName('loader_background_color');
-    const animationColors = getParameterByName('loader_animation_colors');
-    const elementById = document.getElementById('kasko-loader-wrapper');
-
-    if (animationColors) {
-      this.setAnimationColors(animationColors);
-    }
-
-    if (backdropColor) {
-      this.setBackdropColor(backdropColor);
-    }
-
-    if (elementById) {
-      elementById.classList.remove('hidden');
-    }
-  };
-
-  this.hide = () => {
-    const elementById = document.getElementById('kasko-loader-wrapper');
-
-    if (elementById) {
-      elementById.classList.add('li-loaded');
-    }
-  };
-
-  this.setColors = (colors) => {
-    this.setAnimationColors(colors);
-  };
-
-  this.setAnimationColors = (colors) => {
-    insertRule(`#kasko-loader{border-top-color:${colors[0]}!important;}`);
-    insertRule(`#kasko-loader::before{border-top-color:${colors[1]}!important;}`);
-    insertRule(`#kasko-loader::after{border-top-color:${colors[2]}!important;}`);
-  };
-
-  this.setBackdropColor = (color) => {
-    insertRule(`#kasko-loader-wrapper:not(.li-loaded){background:${color}!important;}`);
-    insertRule(`.li-loaded .loader-section{background:${color}!important;}`);
-  };
-}
-
-const loadingIndicator = new LoadingIndicator();
-window.LoadingIndicator = loadingIndicator;
-window.LoadingIndicator.init();

package/src/kasko-loader/loader.less

@@ -1,134 +0,0 @@
-@keyframes spinner-loader {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.hidden {
-  display: none;
-}
-
-#kasko-loader-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1500;
-}
-
-#kasko-loader-wrapper:not(.li-loaded) {
-  background: "@overlaycolor";
-  opacity: 1;
-}
-
-#kasko-loader {
-  display: block;
-  position: relative;
-  left: 50%;
-  top: 50%;
-  width: 150px;
-  height: 150px;
-  margin: -75px 0 0 -75px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: "@color1";
-  animation: spin 2s linear infinite;
-  z-index: 1501;
-}
-
-#kasko-loader::before {
-  content: "";
-  position: absolute;
-  top: 5px;
-  left: 5px;
-  right: 5px;
-  bottom: 5px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: "@color2";
-  animation: spin 3s linear infinite;
-}
-
-#kasko-loader::after {
-  content: "";
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: "@color3";
-  animation: spin 1.5s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-#kasko-loader-wrapper .loader-section {
-  position: fixed;
-  top: 0;
-  width: 50%;
-  height: 100%;
-  z-index: 1500;
-  transform: translateX(0);
-}
-
-.li-loaded .loader-section {
-  background: "@overlaycolor";
-  opacity: .9;
-}
-
-#kasko-loader-wrapper .loader-section.section-left {
-  left: 0;
-}
-
-#kasko-loader-wrapper .loader-section.section-right {
-  right: 0;
-}
-
-/* Loaded */
-
-#kasko-loader-wrapper.li-loaded .loader-section.section-left {
-  transform: translateX(-100%);
-  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-#kasko-loader-wrapper.li-loaded .loader-section.section-right {
-  transform: translateX(100%);
-  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-.li-loaded #kasko-loader {
-  opacity: 0;
-  transition: all 0.3s ease-out;
-}
-
-#kasko-loader-wrapper.li-loaded {
-  visibility: hidden;
-}
-
-.spinner-loader:not(:requigray) {
-  animation: spinner-loader 1500ms infinite linear;
-  border-radius: 0.5em;
-  box-shadow: #025983 1.5em 0 0 0, #025983 1.1em 1.1em 0 0, #025983 0 1.5em 0 0, #025983 -1.1em 1.1em 0 0, #025983 -1.5em 0 0 0, #025983 -1.1em -1.1em 0 0, #025983 0 -1.5em 0 0, #025983 1.1em -1.1em 0 0;
-  display: inline-block;
-  font-size: 10px;
-  width: 1em;
-  height: 1em;
-  margin: 1.5em;
-  overflow: hidden;
-  text-indent: 100%;
-}

package/src/spinner/loader.html

@@ -1,22 +0,0 @@
-<link rel="stylesheet" href="loader.css">
-
-<div id="kasko-loader-wrapper" class="hidden">
-  <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
-  <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-      <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
-        <stop stop-color="#fff" stop-opacity="0" offset="0%"/>
-        <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
-        <stop stop-color="#fff" offset="100%"/>
-      </linearGradient>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-      <g transform="translate(1 1)">
-        <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2"></path>
-        <circle fill="#fff" cx="36" cy="18" r="1"></circle>
-      </g>
-    </g>
-  </svg>
-</div>
-
-<script href="loader.js"></script>

package/src/spinner/loader.js

@@ -1,83 +0,0 @@
-function LoadingIndicator() {
-  let styleSheet = null;
-
-  function loadStyleSheet() {
-    for (let i = 0; i < document.styleSheets.length; i += 1) {
-      const styleSheetItem = document.styleSheets.item(i);
-
-      if (styleSheetItem.title === 'li-loader') {
-        styleSheet = styleSheetItem;
-        break;
-      }
-    }
-  }
-
-  function insertRule(rule) {
-    if (!styleSheet) {
-      loadStyleSheet();
-    }
-
-    if (styleSheet) {
-      styleSheet.insertRule(rule);
-    }
-  }
-
-  function getParameterByName(name) {
-    const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
-
-    if (!match) {
-      return '';
-    }
-
-    let decoded = decodeURIComponent(match[1].replace(/[+]/g, ' '));
-
-    // Attempt to json-decode
-    try {
-      decoded = JSON.parse(decoded);
-    } catch (e) {
-      // Do nothing..
-    }
-
-    return decoded;
-  }
-
-  this.init = () => {
-    const backdropColor = getParameterByName('loader_background_color');
-    const animationColors = getParameterByName('loader_animation_colors');
-    const elementById = document.getElementById('kasko-loader-wrapper');
-
-    if (animationColors) {
-      const color = typeof animationColors === 'string' ? animationColors : animationColors[0];
-      this.setAnimationColors(color);
-    }
-
-    if (backdropColor) {
-      this.setBackdropColor(backdropColor);
-    }
-
-    if (elementById) {
-      elementById.classList.remove('hidden');
-    }
-  };
-
-  this.hide = () => {
-    const elementById = document.getElementById('kasko-loader-wrapper');
-
-    if (elementById) {
-      elementById.classList.add('li-loaded');
-    }
-  };
-
-  this.setAnimationColors = (color) => {
-    insertRule(`#kasko-loader-wrapper svg stop{stop-color:${color}!important;}`);
-    insertRule(`#kasko-loader-wrapper svg circle{fill:${color}!important;}`);
-  };
-
-  this.setBackdropColor = (color) => {
-    insertRule(`#kasko-loader-wrapper:not(.li-loaded){background:${color}!important;}`);
-  };
-}
-
-const loadingIndicator = new LoadingIndicator();
-window.LoadingIndicator = loadingIndicator;
-window.LoadingIndicator.init();

package/src/spinner/loader.less

@@ -1,48 +0,0 @@
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.hidden {
-  display: none;
-}
-
-#kasko-loader-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1500;
-}
-
-#kasko-loader-wrapper svg {
-  display: block;
-  position: relative;
-  left: 50%;
-  top: 50%;
-  width: 150px;
-  height: 150px;
-  margin: -75px 0 0 -75px;
-  z-index: 1501;
-  animation: spin 1s linear infinite;
-}
-
-#kasko-loader-wrapper:not(.li-loaded) {
-  background: "@overlaycolor";
-  opacity: 1;
-}
-
-.li-loaded svg {
-  opacity: 0;
-  transition: all 0.3s ease-out;
-}
-
-#kasko-loader-wrapper.li-loaded {
-  visibility: hidden;
-}