@kasko/fe-loading-indicator 1.0.1 → 1.0.3

package/dist/loader.html.js

@@ -1,2 +1,2 @@
 'use strict';
-module.exports = '<div id="loader-wrapper" style="height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 1500"><div id="loader" style="animation: spin 2s linear infinite; border: 3px solid transparent; border-radius: 50%; display: block; height: 150px; left: 50%; margin: -75px 0 0 -75px; position: relative; top: 50%; width: 150px; z-index: 1501"></div><div class="loader-section section-left" style="background: #222; height: 100%; left: 0; opacity: .9; position: fixed; top: 0; transform: translateX(0); width: 50%; z-index: 1500"></div><div class="loader-section section-right" style="background: #222; height: 100%; opacity: .9; position: fixed; right: 0; top: 0; transform: translateX(0); width: 50%; z-index: 1500"></div></div>';
+module.exports = '<style>@keyframes spinner-loader{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500}#loader,#loader::after,#loader::before{border-radius:50%;border:3px solid transparent}#loader{display:block;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;animation:spin 2s linear infinite;z-index:1501;position:relative}#loader::after,#loader::before{content:"";position:absolute}#loader::before{border-top-color:#fff;top:5px;left:5px;right:5px;bottom:5px;animation:spin 3s linear infinite}#loader::after{top:15px;left:15px;right:15px;bottom:15px;animation:spin 1.5s linear infinite}#loader-wrapper .loader-section{position:fixed;top:0;width:50%;height:100%;background:#222;opacity:.9;z-index:1500;transform:translateX(0)}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}#loader-wrapper.loaded .loader-section.section-left,#loader-wrapper.loaded .loader-section.section-right{transform:translateX(-100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}#loader-wrapper.loaded .loader-section.section-right{transform:translateX(100%)}.loaded #loader{opacity:0;transition:all .3s ease-out}#loader-wrapper.loaded{visibility:hidden;transform:translateY(-100%);transition:all .3s 1s ease-out}.spinner-loader:not(:required){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>\n<div id="loader-wrapper">\n    <div id="loader"></div>\n    <div class="loader-section section-left"></div>\n    <div class="loader-section section-right"></div>\n</div>';

package/gulpfile.js

@@ -6,6 +6,8 @@ const runSequence = require('run-sequence');
 const htmlmin = require('gulp-htmlmin');
 const clean = require('gulp-clean');
 const htmlToJs = require('gulp-html-to-js');
+const replace = require('gulp-replace');
+const fs = require('fs');
 
 gulp.task('clean', function () {
   return gulp.src(['.tmp'], { read: false }).pipe(clean());
@@ -25,9 +27,11 @@ gulp.task('css', function () {
 
 gulp.task('inline:css', function () {
   return gulp.src('.tmp/html/*.html')
-    .pipe(inlineCss())
-    .pipe(htmlmin({ collapseWhitespace: true }))
-    .pipe(gulp.dest('.tmp'))
+    .pipe(replace(/<link rel="stylesheet" href="loader.css">/, function (s) {
+      const style = fs.readFileSync('.tmp/html/loader.css', 'utf8');
+      return '<style>' + style + '</style>';
+    }))
+    .pipe(gulp.dest('./.tmp'));
 });
 
 gulp.task('compile', function () {

package/index.js

@@ -0,0 +1 @@
+module.exports = require('./dist/loader.html.js');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kasko/fe-loading-indicator",
   "shortname": "fe-loading-indicator",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Kasko frontend loading indicator",
   "license": "UNLICENSED",
   "main": "npdist/loader.html.js",
@@ -14,7 +14,8 @@
     "url": "https://github.com/kasko/fe-loading-indicator-lib/issues"
   },
   "dependencies": {
-    "gulp-clean": "^0.3.2"
+    "gulp-clean": "^0.3.2",
+    "gulp-replace": "^0.6.1"
   },
   "devDependencies": {
     "gulp": "^3.9.1",