@kasko/fe-loading-indicator 1.3.0 → 1.3.1

package/README.md

@@ -12,7 +12,7 @@ yarn add @kasko/fe-loading-indicator
 ```
 
 ### Using in other projects
-Requiring `@kasko/fe-loading-indicator` will return string that could be injected in 
+Requiring `@kasko/fe-loading-indicator` will return string that could be injected in
 HTML using 'HtmlWebpackPlugin'.
 ```js
 const loader = require('@kasko/fe-loading-indicator')();
@@ -21,7 +21,8 @@ const loader = require('@kasko/fe-loading-indicator')();
 Module accepts configuration object, where custom CSS loading colors could be provided e.g.
 ```js
 {
-  colors: ['red', 'green', 'white']
+  colors: ['red', 'green', 'white'],
+  overlayColor: '#fff'
 }
 ```
 Loader adds global `LoadingIndicator` instance, for more information see in [type definitions](dist/loader.d.ts)

package/dist/loader.js

@@ -1,5 +1,5 @@
 module.exports = function (config = {}) {
-  let 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:.9}#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>function LoadingIndicator(){this.init=function(){var o=document.getElementById("loader-wrapper");o&&o.classList.remove("hidden")},this.hide=function(){const o=document.getElementById("loader-wrapper");o&&o.classList.add("li-loaded")},this.setColors=function(o){for(var t,e=0;e<document.styleSheets.length;e++){var n=document.styleSheets.item(e);if("li-loader"===n.title){t=n;break}}t&&(t.insertRule("#loader { border-top-color:"+o[0]+"!important;}"),t.insertRule("#loader::before { border-top-color:"+o[1]+"!important;}"),t.insertRule("#loader::after { border-top-color:"+o[2]+"!important;}"))}}const loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
+  let 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:.9}#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>function LoadingIndicator(){this.init=function(){var o=document.getElementById("kasko-loader-wrapper");o&&o.classList.remove("hidden")},this.hide=function(){const o=document.getElementById("kasko-loader-wrapper");o&&o.classList.add("li-loaded")},this.setColors=function(o){for(var t,e=0;e<document.styleSheets.length;e++){var n=document.styleSheets.item(e);if("li-loader"===n.title){t=n;break}}t&&(t.insertRule("#loader { border-top-color:"+o[0]+"!important;}"),t.insertRule("#loader::before { border-top-color:"+o[1]+"!important;}"),t.insertRule("#loader::after { border-top-color:"+o[2]+"!important;}"))}}const loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
 
   if (!config.colors) {
     config.colors = ['#ebbb2a', '#fff', '#a07c0f'];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kasko/fe-loading-indicator",
   "shortname": "fe-loading-indicator",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Kasko frontend loading indicator",
   "license": "UNLICENSED",
   "main": "index.js",

package/src/loader.js

@@ -1,6 +1,6 @@
 function LoadingIndicator() {
   this.init = function () {
-    var elementById = document.getElementById('loader-wrapper');
+    var elementById = document.getElementById('kasko-loader-wrapper');
 
     if (elementById) {
       elementById.classList.remove('hidden');
@@ -8,7 +8,7 @@ function LoadingIndicator() {
   };
 
   this.hide = function () {
-    const elementById = document.getElementById('loader-wrapper');
+    const elementById = document.getElementById('kasko-loader-wrapper');
 
     if (elementById) {
       elementById.classList.add('li-loaded');