@kasko/fe-loading-indicator 1.3.1 → 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/dist/loader.js +1 -1
- package/package.json +1 -1
- package/src/loader.less +1 -1
- package/gulpfile.js +0 -57
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.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
|
-
});
|