@kasko/fe-loading-indicator 1.3.0 → 1.3.2
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.
- package/README.md +3 -2
- package/dist/loader.js +1 -1
- package/package.json +1 -1
- package/src/loader.js +2 -2
- package/src/loader.less +1 -1
- package/gulpfile.js +0 -57
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ yarn add @kasko/fe-loading-indicator
|
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
### Using in other projects
|
|
15
|
-
Requiring `@kasko/fe-loading-indicator` will return string that could be injected in
|
|
15
|
+
Requiring `@kasko/fe-loading-indicator` will return string that could be injected in
|
|
16
16
|
HTML using 'HtmlWebpackPlugin'.
|
|
17
17
|
```js
|
|
18
18
|
const loader = require('@kasko/fe-loading-indicator')();
|
|
@@ -21,7 +21,8 @@ const loader = require('@kasko/fe-loading-indicator')();
|
|
|
21
21
|
Module accepts configuration object, where custom CSS loading colors could be provided e.g.
|
|
22
22
|
```js
|
|
23
23
|
{
|
|
24
|
-
colors: ['red', 'green', 'white']
|
|
24
|
+
colors: ['red', 'green', 'white'],
|
|
25
|
+
overlayColor: '#fff'
|
|
25
26
|
}
|
|
26
27
|
```
|
|
27
28
|
Loader adds global `LoadingIndicator` instance, for more information see in [type definitions](dist/loader.d.ts)
|
package/dist/loader.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
module.exports = function (config = {}) {
|
|
2
|
-
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
|
|
2
|
+
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: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>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> ';
|
|
3
3
|
|
|
4
4
|
if (!config.colors) {
|
|
5
5
|
config.colors = ['#ebbb2a', '#fff', '#a07c0f'];
|
package/package.json
CHANGED
package/src/loader.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
function LoadingIndicator() {
|
|
2
2
|
this.init = function () {
|
|
3
|
-
var elementById = document.getElementById('loader-wrapper');
|
|
3
|
+
var elementById = document.getElementById('kasko-loader-wrapper');
|
|
4
4
|
|
|
5
5
|
if (elementById) {
|
|
6
6
|
elementById.classList.remove('hidden');
|
|
@@ -8,7 +8,7 @@ function LoadingIndicator() {
|
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
this.hide = function () {
|
|
11
|
-
const elementById = document.getElementById('loader-wrapper');
|
|
11
|
+
const elementById = document.getElementById('kasko-loader-wrapper');
|
|
12
12
|
|
|
13
13
|
if (elementById) {
|
|
14
14
|
elementById.classList.add('li-loaded');
|
package/src/loader.less
CHANGED
package/gulpfile.js
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
const gulp = require('gulp');
|
|
2
|
-
const less = require('gulp-less');
|
|
3
|
-
const minifyCSS = require('gulp-csso');
|
|
4
|
-
const runSequence = require('run-sequence');
|
|
5
|
-
const clean = require('gulp-clean');
|
|
6
|
-
const replace = require('gulp-replace');
|
|
7
|
-
const fs = require('fs');
|
|
8
|
-
const minify = require('gulp-minify');
|
|
9
|
-
|
|
10
|
-
gulp.task('clean', function () {
|
|
11
|
-
return gulp.src(['.tmp'], { read: false }).pipe(clean());
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
gulp.task('html', function () {
|
|
15
|
-
return gulp.src('src/*.html')
|
|
16
|
-
.pipe(gulp.dest('.tmp/html'))
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
gulp.task('css', function () {
|
|
20
|
-
return gulp.src('src/*.less')
|
|
21
|
-
.pipe(less())
|
|
22
|
-
.pipe(minifyCSS())
|
|
23
|
-
.pipe(gulp.dest('.tmp/html'))
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
gulp.task('inline', function () {
|
|
27
|
-
return gulp.src('.tmp/html/*.html')
|
|
28
|
-
.pipe(replace(/<script href="loader.js"><\/script>/, function () {
|
|
29
|
-
const script = fs.readFileSync('./.tmp/loader-min.js', 'utf8');
|
|
30
|
-
return '<script>' + script + '</script>';
|
|
31
|
-
}))
|
|
32
|
-
.pipe(replace(/<link rel="stylesheet" href="loader.css">/, function () {
|
|
33
|
-
const style = fs.readFileSync('.tmp/html/loader.css', 'utf8');
|
|
34
|
-
return '<style title="li-loader">' + style + '</style>';
|
|
35
|
-
}))
|
|
36
|
-
.pipe(gulp.dest('./.tmp'));
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
gulp.task('compress', function () {
|
|
40
|
-
gulp.src('./src/loader.js')
|
|
41
|
-
.pipe(minify())
|
|
42
|
-
.pipe(gulp.dest('./.tmp'))
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
gulp.task('compile', function () {
|
|
46
|
-
return gulp.src('./conf/loader.js')
|
|
47
|
-
.pipe(replace(/\$template/, function () {
|
|
48
|
-
const content = fs.readFileSync('./.tmp/loader.html', 'utf8');
|
|
49
|
-
|
|
50
|
-
return content.toString().replace(/\n|\t/g, ' ');
|
|
51
|
-
}))
|
|
52
|
-
.pipe(gulp.dest('./dist'));
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
gulp.task('default', function (callback) {
|
|
56
|
-
runSequence(['clean'], ['html', 'css', 'compress'], ['inline'], ['compile'], ['clean'], callback);
|
|
57
|
-
});
|