@kasko/fe-loading-indicator 2.0.3 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
module.exports = function () {
|
|
8
8
|
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
9
|
-
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
|
|
9
|
+
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 a(o){t||function(){for(var o=0;o<document.styleSheets.length;o+=1){var a=document.styleSheets.item(o);if("li-loader"===a.title){t=a;break}}}(),t&&t.insertRule(o)}function n(o){var t=RegExp("[?&]".concat(o,"=([^&]*)")).exec(window.location.search);if(!t)return"";var a=decodeURIComponent(t[1].replace(/[+]/g," "));try{a=JSON.parse(a)}catch(o){}return a}this.init=function(){var t=n("loader_background_color"),a=n("loader_animation_colors"),r=document.getElementById("kasko-loader-wrapper");a&&o.setAnimationColors(a),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"),window.KaskoChild&&window.KaskoChild.sendCallback("loaded")},this.setColors=function(t){o.setAnimationColors(t)},this.setAnimationColors=function(o){a("#kasko-loader{border-top-color:".concat(o[0],"!important;}")),a("#kasko-loader::before{border-top-color:".concat(o[1],"!important;}")),a("#kasko-loader::after{border-top-color:".concat(o[2],"!important;}"))},this.setBackdropColor=function(o){a("#kasko-loader-wrapper:not(.li-loaded){background:".concat(o,"!important;}")),a(".li-loaded .loader-section{background:".concat(o,"!important;}"))}}var loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
|
|
10
10
|
var colors = config.colors || ['#ebbb2a', '#fff', '#a07c0f'];
|
|
11
11
|
colors.forEach(function (color, index) {
|
|
12
12
|
result = result.replace("\"@color".concat(index + 1, "\""), color);
|
package/dist/spinner/spinner.js
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
module.exports = function () {
|
|
8
8
|
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
9
|
-
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,
|
|
9
|
+
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,a=null;function t(o){a||function(){for(var o=0;o<document.styleSheets.length;o+=1){var t=document.styleSheets.item(o);if("li-loader"===t.title){a=t;break}}}(),a&&a.insertRule(o)}function n(o){var a=RegExp("[?&]".concat(o,"=([^&]*)")).exec(window.location.search);if(!a)return"";var t=decodeURIComponent(a[1].replace(/[+]/g," "));try{t=JSON.parse(t)}catch(o){}return t}this.init=function(){var a=n("loader_background_color"),t=n("loader_animation_colors"),e=document.getElementById("kasko-loader-wrapper");if(t){var i="string"==typeof t?t:t[0];o.setAnimationColors(i)}a&&o.setBackdropColor(a),e&&e.classList.remove("hidden")},this.hide=function(){var o=document.getElementById("kasko-loader-wrapper");o&&o.classList.add("li-loaded"),window.KaskoChild&&window.KaskoChild.sendCallback("loaded")},this.setAnimationColors=function(o){t("#kasko-loader-wrapper svg stop{stop-color:".concat(o,"!important;}")),t("#kasko-loader-wrapper svg circle{fill:".concat(o,"!important;}"))},this.setBackdropColor=function(o){t("#kasko-loader-wrapper:not(.li-loaded){background:".concat(o,"!important;}"))}}var loadingIndicator=new LoadingIndicator;window.LoadingIndicator=loadingIndicator,window.LoadingIndicator.init();</script> ';
|
|
10
10
|
result = result.replace(/"@overlaycolor"/g, config.overlayColor || '#222');
|
|
11
11
|
return result;
|
|
12
12
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kasko/fe-loading-indicator",
|
|
3
3
|
"shortname": "fe-loading-indicator",
|
|
4
|
-
"version": "2.0
|
|
4
|
+
"version": "2.1.0",
|
|
5
5
|
"description": "Kasko frontend loading indicator",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"main": "index.js",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"eslint-config-kasko-base": "^1.1.1",
|
|
24
24
|
"gulp": "^4.0.2",
|
|
25
25
|
"gulp-babel": "^8.0.0",
|
|
26
|
-
"gulp-csso": "^
|
|
26
|
+
"gulp-csso": "^4.0.1",
|
|
27
27
|
"gulp-less": "^4.0.1",
|
|
28
28
|
"gulp-minify": "^3.1.0",
|
|
29
29
|
"gulp-replace": "^1.0.0"
|