├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── config ├── app.js ├── entry.js ├── index.js ├── output.js ├── paths.js ├── plugins.js └── rules.js ├── dist ├── app.css ├── app.js ├── app.min.css └── app.min.js ├── docs ├── app.css ├── app.js ├── index.html └── tardis.gif ├── package.json ├── postcss.config.js ├── src ├── index.js ├── lib │ ├── busy-load.js │ ├── class.BusyLoad.js │ ├── components │ │ ├── class.Component.js │ │ ├── class.Container.js │ │ ├── class.ContainerItem.js │ │ ├── class.Spinner.js │ │ ├── class.SpinnerLib.js │ │ └── class.Text.js │ └── defaults.js ├── sass │ ├── _accordion.scss │ ├── _circle-line.scss │ ├── _circles.scss │ ├── _cube-grid.scss │ ├── _cube.scss │ ├── _cubes.scss │ ├── _pulsar.scss │ ├── _pump.scss │ ├── _utils.scss │ └── sass.scss └── template │ └── index.ejs ├── test ├── test.js └── testrunner.html ├── webpack.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # other 61 | .DS_STORE 62 | *.sublime-project 63 | *.sublime-workspace 64 | 65 | package-lock.json 66 | 67 | .idea/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # other 61 | .DS_STORE 62 | *.sublime-project 63 | *.sublime-workspace 64 | .idea/ 65 | docs -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - stable 5 | 6 | install: 7 | - npm install 8 | 9 | script: 10 | - npm test -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2017, Jon Schlinkert. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/piccard21/busy-load.svg?branch=master)](https://travis-ci.org/piccard21/busy-load) 2 | [![](https://data.jsdelivr.com/v1/package/npm/busy-load/badge)](https://www.jsdelivr.com/package/npm/busy-load) 3 | 4 | # busy-load 5 | 6 | A simple, but flexible loading-mask plugin for jQuery. 7 | 8 | * **Overlay** 9 | * choose an animation, like fade or slide in 10 | * fiddle around with plenty of customization options 11 | * **Spinners** 12 | * css - select from a collection of pure css-spinners from [Tobias Ahlin](http://tobiasahlin.com/spinkit/) 13 | * image - use an image as a spinner 14 | * custom - pass in your custom jQuery-Element 15 | * fontawesome - just use the library-icons 16 | * **Text** 17 | * show some text 18 | * position it on top, bottom, left or right of the spinner 19 | * customize your text, like color, margin, size ... 20 | * **ES6** 21 | * because *busy-load* is completely written in ES6, you can simply *require* or *import* it 22 | 23 | ## Demo 24 | 25 | You can find some examples [here](https://piccard21.github.io/busy-load/). 26 | 27 | ## Getting started 28 | 29 | Add jQuery 30 | 31 | ``` 32 | 33 | ``` 34 | 35 | then busy-load 36 | 37 | ``` 38 | 39 | 40 | ``` 41 | 42 | and call the plugin from your element 43 | 44 | ``` 45 | $("#some-element").busyLoad("show"); 46 | 47 | // with options 48 | $("#another-element").busyLoad("show", { 49 | background: "#000", 50 | spinner: "cube", 51 | animation: "slide" 52 | }); 53 | ``` 54 | 55 | ``` 56 | $("#some-element").busyLoad("hide"); 57 | 58 | // with options 59 | $("#another-element").busyLoad("hide", { 60 | animation: "fade" 61 | }); 62 | ``` 63 | 64 | ### Hint 65 | 66 | The overlay gets an absolute position, so if your caller element has a position of *static*, busy-load will turn it into *relative*. 67 | 68 | ## Installation 69 | 70 | ### cdn 71 | 72 | ``` 73 | 74 | 75 | ``` 76 | 77 | ### npm 78 | ``` 79 | npm i busy-load 80 | ``` 81 | 82 | - **HINT**: *busy-load* imports its scss to the bundle, so you will need a [sass-loader](https://github.com/webpack-contrib/sass-loader). 83 | 84 | #### import 85 | ``` 86 | import 'busy-load'; 87 | ``` 88 | 89 | #### require 90 | ``` 91 | require('busy-load'); 92 | ``` 93 | 94 | 95 | #### copy 96 | - You'll find a normal and a minified version of the *js*-& *css* file inside the **dist**-folder. You can copy them wherever you'd like and include them by a *link*- and *script*-tag. 97 | 98 | 99 | 100 | 101 | ## Options 102 | 103 | Here's a full list of all the default-options you can use and modify on the plugin: 104 | 105 | 106 | Property | Description | value | Default value 107 | ------------- | ------------- | ------------- | ------------- 108 | action | show or hide the overlay | show, hide | - 109 | spinner | a CSS-spinner | pump, accordion, pulsar, cube, cubes, circle-line, circles, cube-grid | pump 110 | image | use an image as spinner | source for image (location, string) | false 111 | fontawesome | use a fontawesome-icon as a spinner | fa fa-refresh fa-spin fa-2x fa-fw | false 112 | custom | use a custom jQuery-element as spinner | jQuery-element $("#el") | false 113 | color | color of the spinner | color-value | #fff 114 | background | background of the overlay | color-value | rgba(0, 0, 0, 0.21) 115 | maxSize | max-size of the spinner | size-value | 50px 116 | minSize | min-size of the spinner | size-value | 20px 117 | text | text next to the spinner | String or false | false 118 | textColor | color of the text | color-value | default is color 119 | textMargin | margin of the text - works on every textPosition | size-value | false 120 | textPosition | where should the text appear | top, bottom, left, right | right 121 | animation | use an animation, when overlay appears or hides| fade, slide | false 122 | animationDuration | pass in duration of animation | slow, fast, integer in ms | fast 123 | containerClass | add a class to the overlay-container | class-name | busy-load-container 124 | containerItemClass | add a class to the container-item | class-name | busy-load-container-item 125 | spinnerClass | add a class to the spinner | class-name | busy-load-spinner 126 | textClass | add a class to the text | class-name | busy-load-text 127 | 128 | 129 | To see them in action and learn how to use them [goto this place](https://piccard21.github.io/busy-load/). 130 | 131 | ## Events 132 | 133 | busy-load includes some basic events 134 | 135 | Event | Description | parameters 136 | ------------- | ------------- | ------------- 137 | bl.show | before overlay is shown | event, $container, $targetNode 138 | bl.shown | after overlay appeared | event, $container, $targetNode 139 | bl.hide | before overlay disappears | event, $container, $targetNode 140 | bl.hidden | after overlay is removed from DOM | event, $container, $targetNode 141 | 142 | ## Fullscreen 143 | 144 | For a fullscreen-overlay use **$.busyLoadFull()**: 145 | 146 | ``` 147 | $.busyLoadFull("show"); 148 | $.busyLoadFull("hide"); 149 | ``` 150 | 151 | - the method accepts the same options like *busyLoad()* 152 | 153 | ## Setup 154 | 155 | If you don't wanna pass in your options all the time, because it would repeat itself, you can use **$.busyLoadSetup**: 156 | 157 | ``` 158 | $.busyLoadSetup({ 159 | animation: "slide", 160 | background: "rgba(255, 152, 0, 0.86)" 161 | }); 162 | ``` 163 | 164 | ## Defaults 165 | 166 | To see the actual default-settings use **$fn.busyLoad.defaults**: 167 | 168 | ``` 169 | $.fn.busyLoad.defaults 170 | ``` 171 | 172 | Setting a new default value: 173 | 174 | ``` 175 | $.fn.busyLoad.defaults.color = "blue" 176 | ``` 177 | 178 | 179 | ## License 180 | 181 | busy-load is licensed under the MIT License - see the LICENSE file for details. 182 | 183 | 184 | ## Author 185 | [Andreas Stephan](https://cafe-serendipity.com) -------------------------------------------------------------------------------- /config/app.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // primary module-configuration 3 | const libraryVarName = 'busyLoad'; 4 | const libraryTarget = 'umd'; 5 | const sourcemap = false; 6 | const htmlTitle = 'busy-load'; 7 | 8 | // general vars 9 | const paths = require('./paths.js'); 10 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 11 | const extractCSS = new ExtractTextPlugin({ 12 | filename: '[name].css', 13 | allChunks: true 14 | }); 15 | 16 | module.exports = { 17 | extractCSS: extractCSS, 18 | libraryVarName: libraryVarName, 19 | libraryTarget: libraryTarget, 20 | paths, 21 | env: process.env.NODE_ENV, 22 | sourcemap, 23 | htmlTitle 24 | } 25 | -------------------------------------------------------------------------------- /config/entry.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const app = require('./app.js') 3 | const appPath = app.paths.path.resolve(app.paths.src, 'index.js'); 4 | const entry = (app.env === 'PRODUCTION') ? { 5 | "app.min": appPath 6 | } : { 7 | "app": appPath 8 | }; 9 | module.exports = { 10 | entry 11 | } -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | const app = require('./app.js'); 2 | const {rules} = require('./rules.js') 3 | const {output} = require('./output.js') 4 | const {entry} = require('./entry.js') 5 | const {plugins} = require('./plugins.js') 6 | 7 | // general options 8 | let options = { 9 | externals: { 10 | jquery: 'jQuery' 11 | }, 12 | entry, 13 | plugins, 14 | output, 15 | module: {rules} 16 | }; 17 | 18 | // add sourcemap 19 | if (app.sourcemap) { 20 | options.devtool= 'source-map'; 21 | } 22 | 23 | // dev-server 24 | if (app.env === 'DEVELOPMENT-SERVER') { 25 | options.devServer= { 26 | contentBase: app.paths.dist, 27 | hot: true 28 | } 29 | } 30 | 31 | module.exports=options; -------------------------------------------------------------------------------- /config/output.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const app = require('./app.js') 3 | const output = { 4 | path: app.paths.dist, 5 | filename: '[name].js', 6 | library: app.libraryVarName, 7 | libraryTarget: app.libraryTarget 8 | } 9 | 10 | module.exports = { 11 | output 12 | } -------------------------------------------------------------------------------- /config/paths.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const root = path.resolve(__dirname, '..'); 4 | const config = path.resolve(root, 'config'); 5 | const dist = path.resolve(root, 'dist'); 6 | const src = path.resolve(root, 'src'); 7 | const css = path.resolve(src, 'css'); 8 | const sass = path.resolve(src, 'sass'); 9 | 10 | module.exports = { 11 | path, 12 | root, 13 | config, 14 | dist, 15 | src, 16 | css, 17 | sass 18 | } -------------------------------------------------------------------------------- /config/plugins.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const app = require('./app.js') 3 | const webpack = require('webpack'); 4 | const htmlWebpackPlugin = require('html-webpack-plugin'); 5 | const cleanWebpackPlugin = require('clean-webpack-plugin'); 6 | const uglifyJSPlugin = require('uglifyjs-webpack-plugin'); 7 | const pathsToClean = ['dist']; 8 | const cleanOptions = { 9 | root: app.paths.root, 10 | verbose: true, 11 | dry: false 12 | } 13 | const plugins = [ 14 | app.extractCSS 15 | ]; 16 | 17 | if (app.env === 'DEVELOPMENT') { 18 | plugins.push(new cleanWebpackPlugin(app.paths.dist, cleanOptions)); 19 | } 20 | 21 | if (app.env === 'PRODUCTION') { 22 | let uglify = new uglifyJSPlugin({ 23 | include: /\.js$/, 24 | sourceMap: true 25 | }); 26 | plugins.push(uglify); 27 | } 28 | 29 | if (app.env === 'DEVELOPMENT-SERVER') { 30 | let htmlPlugin = new htmlWebpackPlugin({ 31 | title: app.htmlTitle, 32 | template: app.paths.path.resolve(app.paths.src, 'template', 'index.ejs'), 33 | }); 34 | plugins.push(new cleanWebpackPlugin(app.paths.dist, cleanOptions), htmlPlugin, new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin()); 35 | } 36 | 37 | module.exports = { 38 | plugins 39 | } -------------------------------------------------------------------------------- /config/rules.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const app = require('./app.js'); 3 | const rules = [{ 4 | test: /\.js$/, 5 | exclude: /(node_modules|bower_components)/, 6 | use: { 7 | loader: 'babel-loader', 8 | options: { 9 | presets: ['env'] 10 | } 11 | } 12 | }, { 13 | test: /\.scss$/i, 14 | include: app.paths.sass, 15 | use: app.extractCSS.extract([{ 16 | loader: 'css-loader', 17 | options: { 18 | minimize: (app.env === 'PRODUCTION') ? true : false, 19 | importLoaders: 1 20 | } 21 | }, 'postcss-loader', 'sass-loader']) 22 | }, { 23 | test: /\.css$/i, 24 | include: app.paths.css, 25 | use: app.extractCSS.extract([{ 26 | loader: 'css-loader', 27 | options: { 28 | minimize: (app.env === 'PRODUCTION') ? true : false, 29 | importLoaders: 1 30 | }, 31 | }, 'postcss-loader']) 32 | }]; 33 | 34 | module.exports = { 35 | rules 36 | } -------------------------------------------------------------------------------- /dist/app.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Spinners 3 | * 4 | * @see http://tobiasahlin.com/spinkit/ 5 | */ 6 | .spinner-cube-grid { 7 | width: 40px; 8 | height: 40px; } 9 | .spinner-cube-grid .sk-cube { 10 | width: 33%; 11 | height: 33%; 12 | background-color: #333; 13 | float: left; 14 | -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 15 | animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } 16 | .spinner-cube-grid .sk-cube1 { 17 | -webkit-animation-delay: 0.2s; 18 | animation-delay: 0.2s; } 19 | .spinner-cube-grid .sk-cube2 { 20 | -webkit-animation-delay: 0.3s; 21 | animation-delay: 0.3s; } 22 | .spinner-cube-grid .sk-cube3 { 23 | -webkit-animation-delay: 0.4s; 24 | animation-delay: 0.4s; } 25 | .spinner-cube-grid .sk-cube4 { 26 | -webkit-animation-delay: 0.1s; 27 | animation-delay: 0.1s; } 28 | .spinner-cube-grid .sk-cube5 { 29 | -webkit-animation-delay: 0.2s; 30 | animation-delay: 0.2s; } 31 | .spinner-cube-grid .sk-cube6 { 32 | -webkit-animation-delay: 0.3s; 33 | animation-delay: 0.3s; } 34 | .spinner-cube-grid .sk-cube7 { 35 | -webkit-animation-delay: 0s; 36 | animation-delay: 0s; } 37 | .spinner-cube-grid .sk-cube8 { 38 | -webkit-animation-delay: 0.1s; 39 | animation-delay: 0.1s; } 40 | .spinner-cube-grid .sk-cube9 { 41 | -webkit-animation-delay: 0.2s; 42 | animation-delay: 0.2s; } 43 | @-webkit-keyframes sk-cubeGridScaleDelay { 44 | 0%, 70%, 100% { 45 | -webkit-transform: scale3D(1, 1, 1); 46 | transform: scale3D(1, 1, 1); } 47 | 35% { 48 | -webkit-transform: scale3D(0, 0, 1); 49 | transform: scale3D(0, 0, 1); } } 50 | @keyframes sk-cubeGridScaleDelay { 51 | 0%, 70%, 100% { 52 | -webkit-transform: scale3D(1, 1, 1); 53 | transform: scale3D(1, 1, 1); } 54 | 35% { 55 | -webkit-transform: scale3D(0, 0, 1); 56 | transform: scale3D(0, 0, 1); } } 57 | .spinner-circle-line { 58 | margin: 10px auto 0; 59 | width: 70px; 60 | text-align: center; } 61 | .spinner-circle-line > div { 62 | width: 18px; 63 | height: 18px; 64 | background-color: #333; 65 | border-radius: 100%; 66 | display: inline-block; 67 | -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; 68 | animation: sk-bouncedelay 1.4s infinite ease-in-out both; } 69 | .spinner-circle-line .bounce1 { 70 | -webkit-animation-delay: -0.32s; 71 | animation-delay: -0.32s; } 72 | .spinner-circle-line .bounce2 { 73 | -webkit-animation-delay: -0.16s; 74 | animation-delay: -0.16s; } 75 | @-webkit-keyframes sk-bouncedelay { 76 | 0%, 80%, 100% { 77 | -webkit-transform: scale(0); } 78 | 40% { 79 | -webkit-transform: scale(1); } } 80 | @keyframes sk-bouncedelay { 81 | 0%, 80%, 100% { 82 | -webkit-transform: scale(0); 83 | transform: scale(0); } 84 | 40% { 85 | -webkit-transform: scale(1); 86 | transform: scale(1); } } 87 | .spinner-circles { 88 | width: 40px; 89 | height: 40px; 90 | position: relative; 91 | text-align: center; 92 | -webkit-animation: sk-rotate 2.0s infinite linear; 93 | animation: sk-rotate 2.0s infinite linear; } 94 | .dot1, .dot2 { 95 | width: 60%; 96 | height: 60%; 97 | display: inline-block; 98 | position: absolute; 99 | top: 0; 100 | background-color: #333; 101 | border-radius: 100%; 102 | -webkit-animation: sk-bounce 2.0s infinite ease-in-out; 103 | animation: sk-bounce 2.0s infinite ease-in-out; } 104 | .dot2 { 105 | top: auto; 106 | bottom: 0; 107 | -webkit-animation-delay: -1.0s; 108 | animation-delay: -1.0s; } 109 | @-webkit-keyframes sk-rotate { 110 | 100% { 111 | -webkit-transform: rotate(360deg); } } 112 | @keyframes sk-rotate { 113 | 100% { 114 | transform: rotate(360deg); 115 | -webkit-transform: rotate(360deg); } } 116 | @-webkit-keyframes sk-bounce { 117 | 0%, 100% { 118 | -webkit-transform: scale(0); } 119 | 50% { 120 | -webkit-transform: scale(1); } } 121 | @keyframes sk-bounce { 122 | 0%, 100% { 123 | transform: scale(0); 124 | -webkit-transform: scale(0); } 125 | 50% { 126 | transform: scale(1); 127 | -webkit-transform: scale(1); } } 128 | /* Cube */ 129 | .spinner-cube { 130 | width: 40px; 131 | height: 40px; 132 | background-color: #333; 133 | margin: 100px auto; 134 | -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; 135 | animation: sk-rotateplane 1.2s infinite ease-in-out; } 136 | @-webkit-keyframes sk-rotateplane { 137 | 0% { 138 | -webkit-transform: perspective(120px); } 139 | 50% { 140 | -webkit-transform: perspective(120px) rotateY(180deg); } 141 | 100% { 142 | -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } 143 | @keyframes sk-rotateplane { 144 | 0% { 145 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 146 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 147 | 50% { 148 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 149 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 150 | 100% { 151 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 152 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } 153 | .spinner-cubes { 154 | width: 40px; 155 | height: 40px; 156 | position: relative; } 157 | .cube1, .cube2 { 158 | background-color: #333; 159 | width: 15px; 160 | height: 15px; 161 | position: absolute; 162 | top: 0; 163 | left: 0; 164 | -webkit-animation: sk-cubemove 1.8s infinite ease-in-out; 165 | animation: sk-cubemove 1.8s infinite ease-in-out; } 166 | .cube2 { 167 | -webkit-animation-delay: -0.9s; 168 | animation-delay: -0.9s; } 169 | @-webkit-keyframes sk-cubemove { 170 | 25% { 171 | -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 172 | 50% { 173 | -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 174 | 75% { 175 | -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 176 | 100% { 177 | -webkit-transform: rotate(-360deg); } } 178 | @keyframes sk-cubemove { 179 | 25% { 180 | transform: translateX(42px) rotate(-90deg) scale(0.5); 181 | -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 182 | 50% { 183 | transform: translateX(42px) translateY(42px) rotate(-179deg); 184 | -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 185 | 50.1% { 186 | transform: translateX(42px) translateY(42px) rotate(-180deg); 187 | -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 188 | 75% { 189 | transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 190 | -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 191 | 100% { 192 | transform: rotate(-360deg); 193 | -webkit-transform: rotate(-360deg); } } 194 | .spinner-pump { 195 | width: 40px; 196 | height: 40px; 197 | position: relative; } 198 | .double-bounce1, .double-bounce2 { 199 | width: 100%; 200 | height: 100%; 201 | border-radius: 50%; 202 | background-color: #333; 203 | opacity: 0.6; 204 | position: absolute; 205 | top: 0; 206 | left: 0; 207 | -webkit-animation: sk-bounce 2.0s infinite ease-in-out; 208 | animation: sk-bounce 2.0s infinite ease-in-out; } 209 | .double-bounce2 { 210 | -webkit-animation-delay: -1.0s; 211 | animation-delay: -1.0s; } 212 | @-webkit-keyframes sk-bounce { 213 | 0%, 100% { 214 | -webkit-transform: scale(0); } 215 | 50% { 216 | -webkit-transform: scale(1); } } 217 | @keyframes sk-bounce { 218 | 0%, 100% { 219 | transform: scale(0); 220 | -webkit-transform: scale(0); } 221 | 50% { 222 | transform: scale(1); 223 | -webkit-transform: scale(1); } } 224 | /* Pulsar */ 225 | .spinner-pulsar { 226 | width: 40px; 227 | height: 40px; 228 | background-color: #333; 229 | border-radius: 100%; 230 | -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; 231 | animation: sk-scaleout 1.0s infinite ease-in-out; } 232 | @-webkit-keyframes sk-scaleout { 233 | 0% { 234 | -webkit-transform: scale(0); } 235 | 100% { 236 | -webkit-transform: scale(1); 237 | opacity: 0; } } 238 | @keyframes sk-scaleout { 239 | 0% { 240 | -webkit-transform: scale(0); 241 | transform: scale(0); } 242 | 100% { 243 | -webkit-transform: scale(1); 244 | transform: scale(1); 245 | opacity: 0; } } 246 | /* Accordion */ 247 | .spinner-accordion { 248 | margin: 100px auto; 249 | width: 50px; 250 | height: 40px; 251 | text-align: center; 252 | font-size: 10px; } 253 | .spinner-accordion > div { 254 | background-color: #333; 255 | height: 100%; 256 | width: 6px; 257 | display: inline-block; 258 | -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; 259 | animation: sk-stretchdelay 1.2s infinite ease-in-out; } 260 | .spinner-accordion.rect2 { 261 | -webkit-animation-delay: -1.1s; 262 | animation-delay: -1.1s; } 263 | .spinner-accordion .rect3 { 264 | -webkit-animation-delay: -1.0s; 265 | animation-delay: -1.0s; } 266 | .spinner-accordion .rect4 { 267 | -webkit-animation-delay: -0.9s; 268 | animation-delay: -0.9s; } 269 | .spinner-accordion.rect5 { 270 | -webkit-animation-delay: -0.8s; 271 | animation-delay: -0.8s; } 272 | @-webkit-keyframes sk-stretchdelay { 273 | 0%, 40%, 100% { 274 | -webkit-transform: scaleY(0.4); } 275 | 20% { 276 | -webkit-transform: scaleY(1); } } 277 | @keyframes sk-stretchdelay { 278 | 0%, 40%, 100% { 279 | transform: scaleY(0.4); 280 | -webkit-transform: scaleY(0.4); } 281 | 20% { 282 | transform: scaleY(1); 283 | -webkit-transform: scaleY(1); } } 284 | .no-scroll { 285 | overflow: hidden; } 286 | -------------------------------------------------------------------------------- /dist/app.min.css: -------------------------------------------------------------------------------- 1 | .spinner-cube-grid{width:40px;height:40px}.spinner-cube-grid .sk-cube{width:33%;height:33%;background-color:#333;float:left;-webkit-animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.spinner-cube-grid .sk-cube1{-webkit-animation-delay:.2s;animation-delay:.2s}.spinner-cube-grid .sk-cube2{-webkit-animation-delay:.3s;animation-delay:.3s}.spinner-cube-grid .sk-cube3{-webkit-animation-delay:.4s;animation-delay:.4s}.spinner-cube-grid .sk-cube4{-webkit-animation-delay:.1s;animation-delay:.1s}.spinner-cube-grid .sk-cube5{-webkit-animation-delay:.2s;animation-delay:.2s}.spinner-cube-grid .sk-cube6{-webkit-animation-delay:.3s;animation-delay:.3s}.spinner-cube-grid .sk-cube7{-webkit-animation-delay:0s;animation-delay:0s}.spinner-cube-grid .sk-cube8{-webkit-animation-delay:.1s;animation-delay:.1s}.spinner-cube-grid .sk-cube9{-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes sk-cubeGridScaleDelay{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes sk-cubeGridScaleDelay{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}.spinner-circle-line{margin:10px auto 0;width:70px;text-align:center}.spinner-circle-line>div{width:18px;height:18px;background-color:#333;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner-circle-line .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner-circle-line .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.spinner-circles{width:40px;height:40px;position:relative;text-align:center;-webkit-animation:sk-rotate 2s infinite linear;animation:sk-rotate 2s infinite linear}.dot1,.dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#333;border-radius:100%;-webkit-animation:sk-bounce 2s infinite ease-in-out;animation:sk-bounce 2s infinite ease-in-out}.dot2{top:auto;bottom:0;-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes sk-rotate{to{-webkit-transform:rotate(1turn)}}@keyframes sk-rotate{to{transform:rotate(1turn);-webkit-transform:rotate(1turn)}}.spinner-cube{width:40px;height:40px;background-color:#333;margin:100px auto;-webkit-animation:sk-rotateplane 1.2s infinite ease-in-out;animation:sk-rotateplane 1.2s infinite ease-in-out}@-webkit-keyframes sk-rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}to{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes sk-rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}to{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.spinner-cubes{width:40px;height:40px;position:relative}.cube1,.cube2{background-color:#333;width:15px;height:15px;position:absolute;top:0;left:0;-webkit-animation:sk-cubemove 1.8s infinite ease-in-out;animation:sk-cubemove 1.8s infinite ease-in-out}.cube2{-webkit-animation-delay:-.9s;animation-delay:-.9s}@-webkit-keyframes sk-cubemove{25%{-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)}50%{-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{-webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)}to{-webkit-transform:rotate(-1turn)}}@keyframes sk-cubemove{25%{transform:translateX(42px) rotate(-90deg) scale(.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)}50%{transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)}50.1%{transform:translateX(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5);-webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)}to{transform:rotate(-1turn);-webkit-transform:rotate(-1turn)}}.spinner-pump{width:40px;height:40px;position:relative}.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#333;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:sk-bounce 2s infinite ease-in-out;animation:sk-bounce 2s infinite ease-in-out}.double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes sk-bounce{0%,to{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.spinner-pulsar{width:40px;height:40px;background-color:#333;border-radius:100%;-webkit-animation:sk-scaleout 1s infinite ease-in-out;animation:sk-scaleout 1s infinite ease-in-out}@-webkit-keyframes sk-scaleout{0%{-webkit-transform:scale(0)}to{-webkit-transform:scale(1);opacity:0}}@keyframes sk-scaleout{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.spinner-accordion{margin:100px auto;width:50px;height:40px;text-align:center;font-size:10px}.spinner-accordion>div{background-color:#333;height:100%;width:6px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.spinner-accordion.rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.spinner-accordion .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.spinner-accordion .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.spinner-accordion.rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-stretchdelay{0%,40%,to{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.no-scroll{overflow:hidden} -------------------------------------------------------------------------------- /dist/app.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("jQuery")):"function"==typeof define&&define.amd?define(["jQuery"],e):"object"==typeof exports?exports.busyLoad=e(require("jQuery")):t.busyLoad=e(t.jQuery)}("undefined"!=typeof self?self:this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=13)}([function(t,e,n){function o(t,e,n){var o=null==t?void 0:i(t,e);return void 0===o?n:o}var i=n(18);t.exports=o},function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var n=0;n",this._options)}}},{key:"options",get:function(){return this._options},set:function(t){this._options=t}},{key:"tag",get:function(){return this._$tag},set:function(t){this._$tag=t}}]),t}()},function(t,e,n){var o=n(10),i=o(Object,"create");t.exports=i},function(t,e,n){function o(t,e){for(var n=t.length;n--;)if(i(t[n][0],e))return n;return-1}var i=n(46);t.exports=o},function(t,e,n){function o(t,e){var n=t.__data__;return i(e)?n["string"==typeof e?"string":"hash"]:n.map}var i=n(52);t.exports=o},function(t,e){var n=Array.isArray;t.exports=n},function(t,e,n){function o(t){return"symbol"==typeof t||r(t)&&i(t)==s}var i=n(9),r=n(25),s="[object Symbol]";t.exports=o},function(t,e,n){var o=n(8),i=o.Symbol;t.exports=i},function(t,e,n){var o=n(21),i="object"==typeof self&&self&&self.Object===Object&&self,r=o||i||Function("return this")();t.exports=r},function(t,e,n){function o(t){return null==t?void 0===t?c:a:u&&u in Object(t)?r(t):s(t)}var i=n(7),r=n(23),s=n(24),a="[object Null]",c="[object Undefined]",u=i?i.toStringTag:void 0;t.exports=o},function(t,e,n){function o(t,e){var n=r(t,e);return i(n)?n:void 0}var i=n(33),r=n(38);t.exports=o},function(t,e){function n(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}t.exports=n},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={spinner:"pump",image:!1,fontawesome:!1,custom:!1,color:"#fff",background:"rgba(0, 0, 0, 0.21)",maxSize:"50px",minSize:"20px",text:!1,textColor:!1,textMargin:".5rem",textPosition:"right",fontSize:"1rem",fullScreen:!1,animation:!1,animationDuration:"fast",containerClass:"busy-load-container",containerItemClass:"busy-load-container-item",spinnerClass:"busy-load-spinner",textClass:"busy-load-text"}},function(t,e,n){"use strict";n(14);var o=n(15),i=n(12),r=function(t){return t&&t.__esModule?t:{default:t}}(i),s=n(64);!function(t){t.fn.busyLoad=o.busyLoad,t.busyLoadSetup=o.busyLoadSetup,t.busyLoadFull=o.busyLoadFull,t.fn.busyLoad.defaults=r.default}(s)},function(t,e){},function(t,e,n){"use strict";function o(t){$.extend(!0,c.default,t)}function i(t,e){return this.each(function(){var n=new s.BusyLoad($(this),JSON.parse(JSON.stringify(c.default)),e);switch(t){case"show":n.show();break;case"hide":n.hide();break;default:throw"don't know action '"+t+"'"}})}function r(t,e){var n=$("body"),o=new s.BusyLoad(n,JSON.parse(JSON.stringify(c.default)),e);switch(t.toLowerCase()){case"show":n.addClass("no-scroll"),o.caller=n,o.extendSettings({fullScreen:!0}),o.show();break;case"hide":o.hide(),n.removeClass("no-scroll")}return n}Object.defineProperty(e,"__esModule",{value:!0}),e.busyLoadSetup=o,e.busyLoad=i,e.busyLoadFull=r;var s=n(16),a=n(12),c=function(t){return t&&t.__esModule?t:{default:t}}(a)},function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0}),e.BusyLoad=void 0;var i=function(){function t(t,e){for(var n=0;n-1}var i=n(3);t.exports=o},function(t,e,n){function o(t,e){var n=this.__data__,o=i(n,t);return o<0?(++this.size,n.push([t,e])):n[o][1]=e,this}var i=n(3);t.exports=o},function(t,e,n){var o=n(10),i=n(8),r=o(i,"Map");t.exports=r},function(t,e,n){function o(t){var e=i(this,t).delete(t);return this.size-=e?1:0,e}var i=n(4);t.exports=o},function(t,e){function n(t){var e=typeof t;return"string"==e||"number"==e||"symbol"==e||"boolean"==e?"__proto__"!==t:null===t}t.exports=n},function(t,e,n){function o(t){return i(this,t).get(t)}var i=n(4);t.exports=o},function(t,e,n){function o(t){return i(this,t).has(t)}var i=n(4);t.exports=o},function(t,e,n){function o(t,e){var n=i(this,t),o=n.size;return n.set(t,e),this.size+=n.size==o?0:1,this}var i=n(4);t.exports=o},function(t,e,n){function o(t){return null==t?"":i(t)}var i=n(57);t.exports=o},function(t,e,n){function o(t){if("string"==typeof t)return t;if(s(t))return r(t,o)+"";if(a(t))return l?l.call(t):"";var e=t+"";return"0"==e&&1/t==-c?"-0":e}var i=n(7),r=n(58),s=n(5),a=n(6),c=1/0,u=i?i.prototype:void 0,l=u?u.toString:void 0;t.exports=o},function(t,e){function n(t,e){for(var n=-1,o=null==t?0:t.length,i=Array(o);++n",{class:"sr-only",text:"Loading ..."}))}},{key:"createCustomTag",value:function(){var t=u(this._busyLoadOptions,"custom");if(!(t instanceof jQuery))throw"wrong type for creating a tag";this.setTag(t),this.tag.addClass("busy-load-spinner-custom")}},{key:"setMaxMinSize",value:function(){this.tag.css({"max-height":u(this._busyLoadOptions,"maxSize"),"max-width":u(this._busyLoadOptions,"maxSize"),"min-height":u(this._busyLoadOptions,"minSize"),"min-width":u(this._busyLoadOptions,"minSize")})}}]),e}(a.Component)},function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:{};switch(o(this,t),this._busyLoadOptions=n,e.toLowerCase()){case"pump":this.createPump();break;case"pulsar":this.createPulsar();break;case"accordion":this.createAccordion();break;case"cube":this.createCube();break;case"cubes":this.createCubes();break;case"circles":this.createCircles();break;case"circle-line":this.createCircleLine();break;case"cube-grid":this.createCubeGrid();break;default:throw"don't know spinner: "+e}}return i(t,[{key:"createCubeGrid",value:function(){this._spinner=$(''),this._spinner.find(".sk-cube").css({"background-color":r(this._busyLoadOptions,"color","#333")})}},{key:"createCircleLine",value:function(){this._spinner=$(''),this._spinner.find(".bounce1, .bounce2, .bounce3").css({"background-color":r(this._busyLoadOptions,"color","#333")})}},{key:"createCircles",value:function(){this._spinner=$(''),this._spinner.css({"margin-right":"0.4rem"}).find(".dot1, .dot2").css({"background-color":r(this._busyLoadOptions,"color","#333")})}},{key:"createPump",value:function(){this._spinner=$(''),this._spinner.find(".double-bounce1, .double-bounce2").css({"background-color":r(this._busyLoadOptions,"color","#333"),"margin-right":"0.9rem"})}},{key:"createPulsar",value:function(){this._spinner=$(''),this._spinner.css({"background-color":r(this._busyLoadOptions,"color","#333")})}},{key:"createAccordion",value:function(){this._spinner=$(''),this._spinner.find("div").css({"background-color":r(this._busyLoadOptions,"color","#333")})}},{key:"createCube",value:function(){this._spinner=$(''),this._spinner.css({"background-color":r(this._busyLoadOptions,"color","#333")})}},{key:"createCubes",value:function(){this._spinner=$(''),this._spinner.css({"margin-right":"0.9rem"}).find(".cube1, .cube2").css({"background-color":r(this._busyLoadOptions,"color","#333")})}},{key:"spinner",get:function(){return this._spinner},set:function(t){this._spinner=t}}]),t}()},function(e,n){e.exports=t}])}); -------------------------------------------------------------------------------- /docs/app.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | background-color: #fff; 3 | color: #636b6f; 4 | font-family: 'Raleway', sans-serif; 5 | font-weight: 100; 6 | height: 100vh; 7 | margin: 0; 8 | } 9 | 10 | .row { 11 | padding: 1rem 0; 12 | } 13 | 14 | .bg { 15 | background: rgba(255, 152, 0, 0.86); 16 | padding: 2.5rem; 17 | color: #fff; 18 | } 19 | 20 | .bg-footer { 21 | background: rgba(255, 152, 0, 0.86); 22 | color: #fff; 23 | } 24 | 25 | .bg-footer p.lead { 26 | margin-bottom: 0; 27 | padding: .5rem; 28 | font-size: .9rem; 29 | } 30 | 31 | code { 32 | margin: 1rem 0; 33 | } 34 | 35 | .code-pre { 36 | white-space: pre; 37 | } 38 | 39 | .flex-me { 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | } 44 | 45 | .my-own-container-class { 46 | background: red !important; 47 | } 48 | 49 | .my-own-container-item-class { 50 | background: pink !important; 51 | } 52 | 53 | .my-own-spinner-class { 54 | background: brown !important; 55 | } 56 | 57 | .my-own-text-class { 58 | color: red !important; 59 | } 60 | 61 | .i-am-static { 62 | position: static; 63 | background: brown; 64 | color: white; 65 | padding: 1rem; 66 | } -------------------------------------------------------------------------------- /docs/app.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | $.busyLoadSetup({ 3 | animation: "slide", 4 | background: "rgba(255, 152, 0, 0.86)" 5 | }); 6 | let showHide = (event, tag, options = {}) => { 7 | event.preventDefault(); 8 | event.stopPropagation(); 9 | $(tag).busyLoad("show", options); 10 | $(tag).click(".busy-load-container", function() { 11 | $(tag).busyLoad("hide"); 12 | }); 13 | }; 14 | // fullscreen 15 | $('.btn-fullscreen').click(function() { 16 | $.busyLoadFull('show'); 17 | $("body>.busy-load-container").click(function() { 18 | $.busyLoadFull('hide'); 19 | }); 20 | }); 21 | // spinners 22 | $(".spinner-01").click(function(e) { 23 | showHide(e, "#spinner-01"); 24 | }); 25 | $(".spinner-02").click(function(e) { 26 | showHide(e, "#spinner-02", { 27 | spinner: "accordion" 28 | }); 29 | }); 30 | $(".spinner-03").click(function(e) { 31 | showHide(e, "#spinner-03", { 32 | spinner: "pulsar" 33 | }); 34 | }); 35 | $(".spinner-04").click(function(e) { 36 | showHide(e, "#spinner-04", { 37 | spinner: "cube" 38 | }); 39 | }); 40 | $(".spinner-05").click(function(e) { 41 | showHide(e, "#spinner-05", { 42 | spinner: "cubes" 43 | }); 44 | }); 45 | $(".spinner-06").click(function(e) { 46 | showHide(e, "#spinner-06", { 47 | spinner: "circle-line" 48 | }); 49 | }); 50 | $(".spinner-07").click(function(e) { 51 | showHide(e, "#spinner-07", { 52 | spinner: "circles" 53 | }); 54 | }); 55 | $(".spinner-08").click(function(e) { 56 | showHide(e, "#spinner-08", { 57 | spinner: "cube-grid" 58 | }); 59 | }); 60 | // image 61 | $(".img-01").click(function(e) { 62 | showHide(e, "#img-01", { 63 | background: "rgba(76, 175, 80, 0.73)", 64 | image: "data:image/gif;base64,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" 65 | }); 66 | }); 67 | $(".img-02").click(function(e) { 68 | showHide(e, "#img-02", { 69 | background: "rgba(0, 51, 101, 0.83)", 70 | image: "http://cafe-serendipity.com/wp-content/uploads/2018/01/tardis.gif", 71 | }); 72 | }); 73 | $(".img-03").click(function(e) { 74 | showHide(e, "#img-03", { 75 | background: "rgba(0, 51, 101, 0.83)", 76 | image: "./tardis.gif", 77 | }); 78 | }); 79 | // fontawesome 80 | $(".fawe-01").click(function(e) { 81 | showHide(e, "#fawe-01", { 82 | fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw" 83 | }); 84 | }); 85 | $(".fawe-02").click(function(e) { 86 | showHide(e, "#fawe-02", { 87 | fontawesome: "fa fa-cog fa-spin fa-3x fa-fw" 88 | }); 89 | }); 90 | // custom 91 | let count = 2121; 92 | let customElement = $("
", { 93 | id: "countdown", 94 | css: { 95 | "font-size": "50px" 96 | }, 97 | text: count 98 | }); 99 | $(".custom-01").click(function(e) { 100 | showHide(e, "#custom-01", { 101 | background: "brown", 102 | custom: customElement 103 | }); 104 | }); 105 | let interval = setInterval(function() { 106 | count--; 107 | customElement.text(count); 108 | if (count <= 0) { 109 | clearInterval(interval); 110 | $("#custom-01").busyLoad("hide"); 111 | } 112 | }, 1000); 113 | // size 114 | $(".size-01").click(function(e) { 115 | showHide(e, "#size-01", { 116 | maxSize: "150px", 117 | minSize: "150px" 118 | }); 119 | }); 120 | $(".size-02").click(function(e) { 121 | showHide(e, "#size-02", { 122 | maxSize: "200px", 123 | minSize: "200px", 124 | background: "rgba(0, 51, 101, 0.83)", 125 | image: "./tardis.gif", 126 | }); 127 | }); 128 | // text 129 | $(".text-01").click(function(e) { 130 | showHide(e, "#text-01", { 131 | text: "LOADING ..." 132 | }); 133 | }); 134 | $(".text-02").click(function(e) { 135 | showHide(e, "#text-02", { 136 | text: "LOADING ...", 137 | spinner: false 138 | }); 139 | }); 140 | $(".text-03").click(function(e) { 141 | showHide(e, "#text-03", { 142 | text: "LOADING ...", 143 | textPosition: "left" 144 | }); 145 | }); 146 | $(".text-04").click(function(e) { 147 | showHide(e, "#text-04", { 148 | text: "LOADING ...", 149 | textPosition: "left" 150 | }); 151 | }); 152 | $(".text-05").click(function(e) { 153 | showHide(e, "#text-05", { 154 | text: "LOADING ...", 155 | textPosition: "top" 156 | }); 157 | }); 158 | $(".text-06").click(function(e) { 159 | showHide(e, "#text-06", { 160 | text: "LOADING ...", 161 | textPosition: "bottom" 162 | }); 163 | }); 164 | $(".text-07").click(function(e) { 165 | showHide(e, "#text-07", { 166 | text: "LOADING ...", 167 | textColor: "white", 168 | color: "red", 169 | background: "brown" 170 | }); 171 | }); 172 | $(".text-08").click(function(e) { 173 | showHide(e, "#text-08", { 174 | text: "LOADING ...", 175 | textMargin: "3rem" 176 | }); 177 | }); 178 | $(".text-09").click(function(e) { 179 | showHide(e, "#text-09", { 180 | text: "LOADING ...", 181 | fontSize: "2rem" 182 | }); 183 | }); 184 | // animation 185 | $(".animation-01").click(function(e) { 186 | showHide(e, "#animation-01", { 187 | animation: false 188 | }); 189 | }); 190 | $(".animation-02").click(function(e) { 191 | showHide(e, "#animation-02", { 192 | animation: "fade" 193 | }); 194 | }); 195 | $(".animation-03").click(function(e) { 196 | showHide(e, "#animation-03", { 197 | animation: "slide" 198 | }); 199 | }); 200 | $(".animation-04").click(function(e) { 201 | showHide(e, "#animation-04", { 202 | animation: "fade", 203 | animationDuration: "slow" 204 | }); 205 | }); 206 | $(".animation-05").click(function(e) { 207 | showHide(e, "#animation-05", { 208 | animation: "fade", 209 | animationDuration: 4000 210 | }); 211 | }); 212 | // classes 213 | $(".class-01").click(function(e) { 214 | showHide(e, "#class-01", { 215 | containerClass: "my-own-container-class" 216 | }); 217 | }); 218 | $(".class-02").click(function(e) { 219 | showHide(e, "#class-02", { 220 | containerItemClass: "my-own-container-item-class" 221 | }); 222 | }); 223 | $(".class-03").click(function(e) { 224 | showHide(e, "#class-03", { 225 | spinnerClass: "my-own-spinner-class" 226 | }); 227 | }); 228 | $(".class-04").click(function(e) { 229 | showHide(e, "#class-04", { 230 | text: "LOADING ...", 231 | textClass: "my-own-text-class" 232 | }); 233 | }); 234 | 235 | // static 236 | $(".static-01").click(function(e) { 237 | showHide(e, "#static-01"); 238 | }); 239 | }); -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | busy-load 21 | 22 | 23 | 24 | 25 | 26 | 27 | 29 | 31 | 33 | 34 | 35 | 36 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |

busy-load

47 |

A simple, but flexible loading-mask plugin for jQuery

48 |

Download on Github Download via npm Use cdn

49 |
50 |
51 | 52 |
53 |
54 |

Documentation

55 |

See the full documentation on github .

56 |
57 |
58 |
59 |
60 | 61 |
62 |
63 |

Setup

64 |

Use $.busyLoadSetup() to preconfigure busy-load, so you don't have to set your default options all the time.

65 | 66 | $.busyLoadSetup({ animation: "slide", background: "rgba(255, 152, 0, 0.86)" }); 67 | 68 |
69 |
70 |
71 |
72 |

Fullscreen

73 |

For a fullscreen-overlay use $.busyLoadFull()

$.busyLoadFull("show");
74 | $.busyLoadFull("hide");
75 |
76 | 77 |
78 |
79 |
80 |
81 | 82 |
83 |
84 |

Hint: tardis

85 |

In former versions of busy-load a tardis-image was included. Due to the package-size, the image was now outsourced. If you want to include it, just use this url on the image-option or download it form there.

86 |
87 |
88 |
89 |
90 | 91 | 92 |
93 |
94 |

Spinners

95 |

CSS

96 |

Choose one of the built in CSS-spinners.

97 |
98 |
99 |
100 |
101 |
102 |
103 |

spinner:

104 |
pump
105 |

Without any options, the default spinner will be pump

$("#el").busyLoad("show"); 106 |

107 |
108 |
109 |
110 |
111 |
112 |
113 |

spinner:

114 |
accordion
$("#el").busyLoad("show", { spinner: "accordion"
115 | }); 116 |

117 |
118 |
119 |
120 |
121 |
122 |
123 |

spinner:

124 |
pulsar
$("#el").busyLoad("show", { spinner: "pulsar"
125 | }); 126 |

127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |

spinner:

136 |
cube
$("#el").busyLoad("show", { spinner: "cube"
137 | }); 138 |

139 |
140 |
141 |
142 |
143 |
144 |
145 |

spinner:

146 |
cubes
$("#el").busyLoad("show", { spinner: "cubes"
147 | }); 148 |

149 |
150 |
151 |
152 |
153 |
154 |
155 |

spinner:

156 |
circle-line
$("#el").busyLoad("show", { spinner: "circle-line"
157 | }); 158 |

159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |

spinner:

168 |
circles
$("#el").busyLoad("show", { spinner: "circles"
169 | }); 170 |

171 |
172 |
173 |
174 |
175 |
176 |
177 |

spinner:

178 |
cube-grid
$("#el").busyLoad("show", { spinner: "cube-grid"
179 | }); 180 |

181 |
182 |
183 |
184 |
185 |
186 |
187 | 188 |
189 |
190 |

Images

191 |

Use an image as spinner.

192 |
193 |
194 |
195 |
196 |
197 |
198 |

image:

199 |
base64
200 | $("#el").busyLoad("show", { background: "rgba(76, 175, 80, 0.73)",
201 | image: "data:image/gif;base64,R0lGODlhQAA..."
202 | }); 203 |

show 204 |
205 |
206 |
207 |
208 |
209 |
210 |

image:

211 |
full url
212 | $("#el").busyLoad("show", {
213 | image: "http://cafe-serendipity.com/wp-content/uploads/2018/01/tardis.gif"
214 | });

show 215 |
216 |
217 |
218 |
219 |
220 |
221 |

image:

222 |
relative url
223 | $("#el").busyLoad("show", {
224 | image: "./tardis.gif"
225 | });

show 226 |
227 |
228 |
229 |
230 |
231 |
232 | 233 |
234 |
235 |

Fontawesome

236 |

Include the fontawesome-library and use its icons a spinner.

237 |
238 |
239 |
240 |
241 |
242 |
243 |

fontawesome:

244 |
icon class
245 |

add also fa-spin

$("#el").busyLoad("show", {
246 | fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw" }); 247 |

show 248 |
249 |
250 |
251 |
252 |
253 |
254 |

fontawesome:

255 |
icon class
256 |

add also fa-spin

$("#el").busyLoad("show", {
257 | fontawesome: "fa fa-cog fa-spin fa-3x fa-fw" }); 258 |

show 259 |
260 |
261 |
262 |
263 |
264 |
265 | 266 |
267 |
268 |

Custom

269 |

Pass in your own jQuery-Element. Here's a quick example:

270 |
271 |
272 |
273 |
274 | let count = 2121; 275 | let customElement = $("<div>", { 276 | id: "countdown", 277 | css: { "font-size" : "50px" }, text: count 278 | }); 279 | $("#el").busyLoad("show", { 280 | background: "brown", custom: customElement 281 | }); 282 | let interval = setInterval(function(){ 283 | count--; 284 | customElement.text(count); 285 | if (count <= 0) { 286 | clearInterval(interval); 287 | $("#el").busyLoad("hide"); 288 | } 289 | }, 1000); 290 |
291 |
292 |

show

293 |
294 |
295 |
296 | 297 |
298 | 299 |
300 |
301 |

Sizing

302 |

Use maxSize & minSize for sizing the spinner. This only works with CSS- & image-spinners.

303 |
304 |
305 |
306 |
307 |
308 |
309 |

max/minSize

310 |
size
311 |

Size a spinner

312 |

$("#el").busyLoad("show", {
313 | maxSize: "150px",
314 | minSize: "150px"
315 | });

316 |

show 317 |

318 |
319 |
320 |
321 |
322 |
323 |
324 |

max/minSize

325 |
size
326 |

Size an image

$("#el").busyLoad("show", {
327 | maxSize: "200px",
328 | minSize: "200px",
329 | background: "rgba(0, 51, 101, 0.83)",
330 | image: "./tardis.gif"
331 | }); 332 |

show 333 |
334 |
335 |
336 |
337 |
338 |
339 | 340 |
341 |
342 |

Text

Add text, position & style it. 343 |
344 |
345 |
346 |
347 |
348 |
349 |

text:

350 |
LOADING ...
351 |

$("#el").busyLoad("show", { text: "LOADING ..."
352 | });

353 |

show 354 |

355 |
356 |
357 |
358 |
359 |
360 |
361 |

spinner:

362 |
false
363 |

Explicitly hide the spinner.

$("#el").busyLoad("show", { text: "LOADING ...",
364 | spinner: false
365 | }); 366 |

show 367 |
368 |
369 |
370 |
371 |
372 |
373 |

textColor:

374 |
color
$("#el").busyLoad("show", {
375 | text: "LOADING ...",
376 | textColor: "white",
377 | color: "red",
378 | background: "brown"
379 | }); 380 |

show 381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |

textPosition:

390 |
top
$("#el").busyLoad("show", { text: "LOADING ...",
391 | textPosition: "top"
392 | }); 393 |

show 394 |
395 |
396 |
397 |
398 |
399 |
400 |

textPosition:

401 |
bottom
$("#el").busyLoad("show", { text: "LOADING ...",
402 | textPosition: "bottom"
403 | }); 404 |

show 405 |
406 |
407 |
408 |
409 |
410 |
411 |

textPosition:

412 |
left
$("#el").busyLoad("show", { text: "LOADING ...",
413 | textPosition: "left"
414 | }); 415 |

show 416 |
417 |
418 |
419 |
420 | 421 |
422 |
423 |
424 |
425 |

textMargin:

426 |
size
$("#el").busyLoad("show", {
427 | text: "LOADING ...",
428 | textMargin: "3rem"
429 | }); 430 |

show 431 |
432 |
433 |
434 |
435 |
436 |
437 |

fontSize:

438 |
size
$("#el").busyLoad("show", {
439 | text: "LOADING ...",
440 | fontSize: "2rem"
441 | }); 442 |

show 443 |
444 |
445 |
446 |
447 |
448 |
449 | 450 |
451 |
452 |

Animation

453 |
454 |
455 |
456 |
457 |
458 |
459 |

animation:

460 |
false
$("#el").busyLoad("show", {
461 | animation: false
462 | }); 463 |

show 464 |
465 |
466 |
467 |
468 |
469 |
470 |

animation:

471 |
fade
$("#el").busyLoad("show", {
472 | animation: "fade"
473 | }); 474 |

show 475 |
476 |
477 |
478 |
479 |
480 |
481 |

animation:

482 |
slide
$("#el").busyLoad("show", {
483 | animation: "slide"
484 | }); 485 |

show 486 |
487 |
488 |
489 |
490 | 491 |
492 |
493 |
494 |
495 |

animationDuration:

496 |
slow/fast
$("#el").busyLoad("show", {
497 | animation: "fade",
498 | animationDuration: "slow"
499 | }); 500 |

show 501 |
502 |
503 |
504 |
505 |
506 |
507 |

animationDuration:

508 |
time
$("#el").busyLoad("show", {
509 | animation: "fade",
510 | animationDuration: 4000
511 | }); 512 |

show 513 |
514 |
515 |
516 |
517 |
518 |
519 | 520 |
521 |
522 |

Classes

523 |

Add your own-classes to the components of the overlay.

524 |
525 |
526 |
527 |
528 |
529 |
530 |

containerClass:

531 |
class
$("#el").busyLoad("show", {
532 | containerClass: "my-own-container-class"
533 | }); 534 |

show 535 |
536 |
537 |
538 |
539 |
540 |
541 |

containerItemClass:

542 |
class
$("#el").busyLoad("show", {
543 | containerItemClass: "my-own-container-item-class"
544 | }); 545 |

show 546 |
547 |
548 |
549 |
550 | 551 |
552 |
553 |
554 |
555 |

spinnerClass:

556 |
class
$("#el").busyLoad("show", {
557 | spinnerClass: "my-own-spinner-class"
558 | }); 559 |

show 560 |
561 |
562 |
563 |
564 |
565 |
566 |

textClass:

567 |
class
$("#el").busyLoad("show", {
568 | textClass: "my-own-text-class"
569 | }); 570 |

show 571 |
572 |
573 |
574 |
575 |
576 | 577 |
578 | 579 |
580 |
581 |

CSS-position

582 |
583 |
584 | 585 |
586 |
587 |

588 | If the calling element has a position of static, busy-load will turn it into relative, because otherwise the overlay would be positioned to a parent element other than static. 589 |

590 |
591 |
592 |
593 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 594 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 595 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 596 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 597 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 598 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 599 |
600 |

show 601 |
602 |
603 |
604 | 605 |
606 |

©2017 Andreas Stephan

607 |
608 | 609 | -------------------------------------------------------------------------------- /docs/tardis.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piccard21/busy-load/33bde6d2740008490e971a538ac6d17d5aa74b6d/docs/tardis.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "busy-load", 3 | "version": "0.1.2", 4 | "description": "A flexible jQuery loading-mask", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "test": "mocha-chrome test/testrunner.html", 8 | "dev": "npm run development", 9 | "development": "cross-env NODE_ENV=DEVELOPMENT webpack --progress --hide-modules", 10 | "watch": "cross-env NODE_ENV=DEVELOPMENT webpack --progress --hide-modules --watch", 11 | "prod": "npm run production", 12 | "production": "npm run development & cross-env NODE_ENV=PRODUCTION webpack --progress --hide-modules", 13 | "start": "cross-env NODE_ENV=DEVELOPMENT-SERVER webpack-dev-server --open", 14 | "prepublish": "npm test" 15 | }, 16 | "homepage": "https://github.com/piccard21/busy-load", 17 | "keywords": [ 18 | "jQuery-plugin", 19 | "loading-mask", 20 | "overlay", 21 | "mask", 22 | "loader" 23 | ], 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/piccard21/busy-load" 27 | }, 28 | "author": "Andreas Stephan (info@cafe-serendipity.com)", 29 | "license": "MIT", 30 | "devDependencies": { 31 | "babel-core": "^6.26.0", 32 | "babel-loader": "^7.1.2", 33 | "babel-polyfill": "^6.26.0", 34 | "babel-preset-env": "^1.6.1", 35 | "chai": "^4.1.2", 36 | "chai-jquery": "^2.0.0", 37 | "clean-webpack-plugin": "^0.1.17", 38 | "cross-env": "^5.1.1", 39 | "css-loader": "^0.28.7", 40 | "extract-text-webpack-plugin": "^3.0.2", 41 | "html-webpack-plugin": "^2.30.1", 42 | "jquery": "^3.2.1", 43 | "lodash": "^4.17.4", 44 | "mocha": "^4.0.1", 45 | "mocha-chrome": "^2.0.0", 46 | "node-sass": "^4.5.3", 47 | "postcss": "^6.0.14", 48 | "postcss-cssnext": "^3.0.2", 49 | "postcss-import": "^11.0.0", 50 | "postcss-loader": "^2.0.8", 51 | "sass-loader": "^6.0.6", 52 | "sinon": "^4.1.2", 53 | "sinon-chai": "^2.14.0", 54 | "webpack": "^3.8.1", 55 | "webpack-cli": "^3.2.3", 56 | "webpack-dev-server": "^3.0.0" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-import': {}, 4 | 'postcss-cssnext': { 5 | browsers: ['last 2 versions', '> 5%'], 6 | }, 7 | }, 8 | }; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './sass/sass.scss'; 2 | import { 3 | busyLoad, 4 | busyLoadSetup, 5 | busyLoadFull 6 | } from './lib/busy-load.js' 7 | import defaults from './lib/defaults.js'; 8 | 9 | let jQuery = require('jquery'); 10 | 11 | (function($) { 12 | $.fn.busyLoad = busyLoad; 13 | $.busyLoadSetup = busyLoadSetup; 14 | $.busyLoadFull = busyLoadFull; 15 | $.fn.busyLoad.defaults = defaults; 16 | })(jQuery); -------------------------------------------------------------------------------- /src/lib/busy-load.js: -------------------------------------------------------------------------------- 1 | import {BusyLoad} from './class.BusyLoad.js'; 2 | import defaults from './defaults.js'; 3 | 4 | 5 | export function busyLoadSetup(settings) { 6 | $.extend(true, defaults, settings); 7 | } 8 | 9 | 10 | export function busyLoad(action, options) { 11 | 12 | return this.each(function () { 13 | let bl = new BusyLoad($(this), JSON.parse(JSON.stringify(defaults)), options); 14 | 15 | switch (action) { 16 | case "show": 17 | bl.show(); 18 | break; 19 | case "hide": 20 | bl.hide(); 21 | break; 22 | default: 23 | throw `don't know action '${action}'` 24 | } 25 | }); 26 | } 27 | 28 | 29 | export function busyLoadFull(action, options) { 30 | 31 | let $body = $('body'); 32 | let bl = new BusyLoad($body, JSON.parse(JSON.stringify(defaults)), options); 33 | 34 | 35 | switch (action.toLowerCase()) { 36 | case "show": 37 | $body.addClass("no-scroll"); 38 | bl.caller = $body; 39 | bl.extendSettings({ 40 | fullScreen: true 41 | }); 42 | bl.show(); 43 | 44 | break; 45 | 46 | case "hide": 47 | bl.hide(); 48 | $body.removeClass("no-scroll"); 49 | break; 50 | } 51 | 52 | return $body; 53 | 54 | } 55 | 56 | -------------------------------------------------------------------------------- /src/lib/class.BusyLoad.js: -------------------------------------------------------------------------------- 1 | import {Container} from './components/class.Container.js'; 2 | import {ContainerItem} from './components/class.ContainerItem.js'; 3 | import {Text} from './components/class.Text.js'; 4 | import {Spinner} from './components/class.Spinner.js'; 5 | const get = require("lodash/get"); 6 | 7 | export class BusyLoad { 8 | constructor(caller, defaults, options) { 9 | 10 | this._settings = defaults; 11 | this._caller= caller; 12 | 13 | this.extendSettings(options); 14 | // this.debugSettings(); 15 | } 16 | 17 | get settings() { 18 | return this._settings; 19 | } 20 | 21 | set settings(newOptions) { 22 | this._settings = newOptions; 23 | } 24 | 25 | get caller() { 26 | return this._caller; 27 | } 28 | 29 | set caller(newOptions) { 30 | this._caller = newOptions; 31 | } 32 | 33 | debugSettings() { 34 | console.log(this._settings.fullScreen); 35 | } 36 | 37 | extendSettings(options) { 38 | $.extend(this._settings, options); 39 | } 40 | 41 | 42 | animateShow($tag) { 43 | let callback = () => $tag.trigger("bl.shown", [$tag, $(this.caller)]); 44 | 45 | this.caller.append($tag); // already hidden 46 | $tag.trigger("bl.show", [$tag, $(this.caller)]); 47 | 48 | if (get(this.settings, "animation", false)) { 49 | 50 | switch (get(this.settings, "animation").toLowerCase()) { 51 | case "fade": 52 | $tag = $tag.fadeIn(get(this.settings, "animationDuration", "fast"), callback); 53 | break; 54 | case "slide": 55 | $tag = $tag.slideDown(get(this.settings, "animationDuration", "fast"), callback); 56 | break; 57 | default: 58 | throw "don't know animation: " + get(this.settings, "animation"); 59 | } 60 | } else { 61 | $tag.show(0, callback); 62 | } 63 | 64 | return $tag; 65 | } 66 | 67 | animateHide($tag) { 68 | let callback = () => { 69 | $tag.trigger("bl.hidden", [$tag, $(this.caller)]); 70 | $tag.remove(); 71 | } 72 | 73 | $tag.trigger("bl.hide", [$tag, $(this.caller)]); 74 | 75 | if (get(this.settings, "animation", false)) { 76 | switch (get(this.settings, "animation").toLowerCase()) { 77 | case "fade": 78 | $tag = $tag.fadeOut(get(this.settings, "animationDuration", "fast"), callback); 79 | break; 80 | case "slide": 81 | $tag = $tag.slideUp(get(this.settings, "animationDuration", "fast"), callback); 82 | break; 83 | default: 84 | throw "don't know animation: " + get(this.settings, "animation"); 85 | } 86 | } else { 87 | $tag.hide(0, callback); 88 | } 89 | } 90 | 91 | 92 | getOverlay() { 93 | // already existent? 94 | if(this._caller.data("busy-load-container")) { 95 | return $("#"+this._caller.data("busy-load-container")); 96 | } 97 | // no ... create one 98 | else { 99 | // container & elements 100 | this._container = new Container(this._settings); 101 | this._containerItem = new ContainerItem(this._settings); 102 | 103 | 104 | // append text 105 | if (get(this.settings, "text", false)) { 106 | this._loadingText= new Text(this._settings); 107 | this._containerItem.tag.append(this._loadingText.tag); 108 | } 109 | // append spinner 110 | if (get(this.settings, "spinner", "pump") !== false) { 111 | this._spinner= new Spinner(this._settings); 112 | this._containerItem.tag.append(this._spinner.tag); 113 | } 114 | 115 | // container 116 | this._container.tag.append(this._containerItem.tag).hide(); 117 | } 118 | 119 | return this._container.tag; 120 | } 121 | 122 | createRandomString() { 123 | return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); 124 | } 125 | 126 | toggle($tag, action) { 127 | // show 128 | if(action == 'show') { 129 | const randomString = this.createRandomString(); 130 | 131 | // position static? 132 | if(this.caller.css('position') === 'static') { 133 | this.caller.css('position', 'relative') 134 | } 135 | 136 | this._caller.addClass('busy-load-active'); 137 | $tag.attr('id', randomString); 138 | $tag = this.animateShow($tag); 139 | 140 | this._caller.data("busy-load-container", randomString); 141 | } 142 | // hide 143 | else { 144 | this.animateHide($tag); 145 | this._caller.removeData("busy-load-container"); 146 | this._caller.removeClass('busy-load-active'); 147 | } 148 | } 149 | 150 | show() { 151 | this.toggle( this.getOverlay(), "show") 152 | } 153 | 154 | hide() { 155 | const containerId = this._caller.data('busy-load-container'); 156 | this.toggle( $("#"+containerId), "hide" ); 157 | } 158 | 159 | } 160 | -------------------------------------------------------------------------------- /src/lib/components/class.Component.js: -------------------------------------------------------------------------------- 1 | export class Component { 2 | constructor(tag, options, busyLoadOptions) { 3 | this._options = options; 4 | this._busyLoadOptions = busyLoadOptions; 5 | 6 | this.setTag(tag); 7 | // this.debugOptions(); 8 | } 9 | 10 | /** 11 | * OPTIONS 12 | */ 13 | 14 | get options() { 15 | return this._options; 16 | } 17 | 18 | set options(newOptions) { 19 | this._options = newOptions; 20 | } 21 | 22 | debugOptions() { 23 | console.log(this._options); 24 | } 25 | 26 | extendOptions(options) { 27 | $.extend(this._options, options); 28 | } 29 | 30 | 31 | /** 32 | * TAG 33 | */ 34 | 35 | get tag() { 36 | return this._$tag; 37 | } 38 | 39 | set tag($tag) { 40 | this._$tag = $tag; 41 | } 42 | 43 | setTag(tag) { 44 | if (tag instanceof jQuery) { 45 | this._$tag = tag; 46 | } else if (typeof tag === 'string' || tag instanceof String) { 47 | this._$tag = $("<" + tag + "/>", this._options); 48 | } else { 49 | throw "wrong type for creating a tag"; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/lib/components/class.Container.js: -------------------------------------------------------------------------------- 1 | import { Component } from './class.Component.js'; 2 | const get = require("lodash/get"); 3 | 4 | export class Container extends Component { 5 | constructor(busyLoadOptions) { 6 | super('div', { 7 | "class": get(busyLoadOptions, "containerClass"), 8 | "css": { 9 | "position": get(busyLoadOptions, "fullScreen", false) ? "fixed" : "absolute", 10 | "top": 0, 11 | "left": 0, 12 | "background": get(busyLoadOptions, "background", "#fff"), 13 | "color": get(busyLoadOptions, "color", "#0000001a"), 14 | "display": "flex", 15 | "align-items": "center", 16 | "justify-content": "center", 17 | "width": "100%", 18 | "height": "100%", 19 | "z-index": 9999 20 | } 21 | }, busyLoadOptions); 22 | } 23 | } -------------------------------------------------------------------------------- /src/lib/components/class.ContainerItem.js: -------------------------------------------------------------------------------- 1 | import {Component} from './class.Component.js'; 2 | const get = require("lodash/get"); 3 | 4 | export class ContainerItem extends Component { 5 | constructor(busyLoadOptions) { 6 | 7 | let flexDirection = get(busyLoadOptions, "textPosition", "right"); 8 | 9 | switch (flexDirection) { 10 | case "top": 11 | flexDirection = "column"; 12 | break; 13 | case "bottom": 14 | flexDirection = "column-reverse"; 15 | break; 16 | case "right": 17 | flexDirection = "row-reverse"; 18 | break; 19 | case "left": 20 | flexDirection = "row"; 21 | break; 22 | default: 23 | throw `don't know textPosition: ${flexDirection}` 24 | } 25 | 26 | super('div', { 27 | "class": get(busyLoadOptions, "containerItemClass"), 28 | "css": { 29 | "background": "none", 30 | "display": "flex", 31 | "justify-content": "center", 32 | "align-items": "center", 33 | "flex-direction": flexDirection 34 | } 35 | }, busyLoadOptions); 36 | } 37 | } -------------------------------------------------------------------------------- /src/lib/components/class.Spinner.js: -------------------------------------------------------------------------------- 1 | import { Component } from './class.Component.js'; 2 | import { SpinnerLib } from './class.SpinnerLib.js'; 3 | const get = require("lodash/get"); 4 | 5 | export class Spinner extends Component { 6 | constructor(busyLoadOptions) { 7 | super("span", {}, busyLoadOptions); 8 | 9 | if (get(this._busyLoadOptions, 'fontawesome')) { 10 | this.createFontAwesomeTag(); 11 | } 12 | else if (get(this._busyLoadOptions, 'custom')) { 13 | this.createCustomTag(); 14 | } 15 | else if (get(this._busyLoadOptions, 'image')) { 16 | this.createImageTag(); 17 | } 18 | else if (get(this._busyLoadOptions, 'spinner')) { 19 | this.createCssTag(get(this._busyLoadOptions, 'spinner')); 20 | } 21 | else { 22 | this.createCssTag("pump"); 23 | } 24 | 25 | this.tag.addClass(get(this._busyLoadOptions, "spinnerClass")); 26 | } 27 | 28 | 29 | createCssTag(spinnerType) { 30 | let spinnerLib = new SpinnerLib(spinnerType, this._busyLoadOptions); 31 | this.setTag(spinnerLib.spinner); 32 | this.tag.addClass("busy-load-spinner-css"); 33 | this.setMaxMinSize(); 34 | } 35 | 36 | createImageTag() { 37 | this.options = { 38 | "class": "loader-image", 39 | "src": this._busyLoadOptions.image 40 | }; 41 | 42 | this.setTag('img'); 43 | this.setMaxMinSize(); 44 | this.tag.addClass("busy-load-spinner-image"); 45 | } 46 | 47 | createFontAwesomeTag() { 48 | this.options = { 49 | "class": get(this._busyLoadOptions, 'fontawesome', "fa fa-refresh fa-spin fa-2x fa-fw"), 50 | "css": { 51 | "color": get(this._busyLoadOptions, 'color', "#fff") 52 | } 53 | }; 54 | 55 | this.setTag('span'); 56 | this.tag.addClass("busy-load-spinner-fontawesome"); 57 | 58 | this._$tag.append($("", { 59 | "class": "sr-only", 60 | "text": "Loading ..." 61 | })); 62 | } 63 | 64 | createCustomTag() { 65 | let custom = get(this._busyLoadOptions, 'custom'); 66 | let isJqueryObject = custom instanceof jQuery 67 | 68 | if (!isJqueryObject) { 69 | throw "wrong type for creating a tag"; 70 | } 71 | 72 | this.setTag(custom); 73 | this.tag.addClass("busy-load-spinner-custom"); 74 | } 75 | 76 | setMaxMinSize() { 77 | this.tag.css({ 78 | "max-height": get(this._busyLoadOptions, 'maxSize'), 79 | "max-width": get(this._busyLoadOptions, 'maxSize'), 80 | "min-height": get(this._busyLoadOptions, 'minSize'), 81 | "min-width": get(this._busyLoadOptions, 'minSize') 82 | }); 83 | } 84 | 85 | 86 | // https://projects.lukehaas.me/css-loaders/ 87 | } -------------------------------------------------------------------------------- /src/lib/components/class.SpinnerLib.js: -------------------------------------------------------------------------------- 1 | const get = require("lodash/get"); 2 | 3 | export class SpinnerLib { 4 | constructor(spinner, busyLoadOptions={}) { 5 | this._busyLoadOptions = busyLoadOptions; 6 | 7 | switch (spinner.toLowerCase()) { 8 | case "pump": 9 | this.createPump(); 10 | break; 11 | case "pulsar": 12 | this.createPulsar(); 13 | break; 14 | case "accordion": 15 | this.createAccordion(); 16 | break; 17 | case "cube": 18 | this.createCube(); 19 | break; 20 | case "cubes": 21 | this.createCubes(); 22 | break; 23 | case "circles": 24 | this.createCircles(); 25 | break; 26 | case "circle-line": 27 | this.createCircleLine(); 28 | break; 29 | case "cube-grid": 30 | this.createCubeGrid(); 31 | break; 32 | default: 33 | throw `don't know spinner: ${spinner}` 34 | } 35 | } 36 | get spinner() { 37 | return this._spinner; 38 | } 39 | set spinner(spinner) { 40 | this._spinner = spinner; 41 | } 42 | createCubeGrid() { 43 | this._spinner = $(``); 54 | this._spinner.find(".sk-cube").css({ 55 | "background-color": get(this._busyLoadOptions, "color","#333") 56 | }); 57 | } 58 | createCircleLine() { 59 | this._spinner = $(``); 64 | this._spinner.find(".bounce1, .bounce2, .bounce3").css({ 65 | "background-color": get(this._busyLoadOptions, "color","#333") 66 | }); 67 | } 68 | createCircles() { 69 | this._spinner = $(``); 73 | this._spinner.css({ 74 | "margin-right": "0.4rem" 75 | }).find(".dot1, .dot2").css({ 76 | "background-color": get(this._busyLoadOptions, "color","#333") 77 | }); 78 | } 79 | createPump() { 80 | this._spinner = $(``); 84 | 85 | this._spinner.find(".double-bounce1, .double-bounce2").css({ 86 | "background-color": get(this._busyLoadOptions, "color","#333"), 87 | "margin-right": "0.9rem" 88 | }); 89 | } 90 | createPulsar() { 91 | this._spinner = $(``); 92 | this._spinner.css({ 93 | "background-color": get(this._busyLoadOptions, "color","#333") 94 | }); 95 | } 96 | createAccordion() { 97 | this._spinner = $(``); 104 | this._spinner.find("div").css({ 105 | "background-color": get(this._busyLoadOptions, "color","#333") 106 | }); 107 | } 108 | createCube() { 109 | this._spinner = $(``); 110 | this._spinner.css({ 111 | "background-color": get(this._busyLoadOptions, "color","#333") 112 | }); 113 | } 114 | createCubes() { 115 | this._spinner = $(``); 119 | 120 | this._spinner.css({ 121 | "margin-right": "0.9rem" 122 | }).find(".cube1, .cube2").css({ 123 | "background-color": get(this._busyLoadOptions, "color","#333") 124 | }); 125 | 126 | } 127 | } -------------------------------------------------------------------------------- /src/lib/components/class.Text.js: -------------------------------------------------------------------------------- 1 | import { 2 | Component 3 | } from './class.Component.js'; 4 | const get = require("lodash/get"); 5 | 6 | export class Text extends Component { 7 | constructor(busyLoadOptions) { 8 | super('span', { 9 | "class": get(busyLoadOptions, "textClass"), 10 | "css": { 11 | "color": get(busyLoadOptions, 'textColor', get(busyLoadOptions, 'color', "#fff")), 12 | "font-size": get(busyLoadOptions, 'fontSize', "1rem"), 13 | }, 14 | "text": get(busyLoadOptions, "text", "Loading ...") 15 | }, busyLoadOptions); 16 | 17 | 18 | // set margin 19 | let flexDirection = get(busyLoadOptions, "textPosition", "right"); 20 | let marginDirection = "margin-left"; 21 | 22 | switch (flexDirection) { 23 | case "top": 24 | marginDirection = "margin-bottom"; 25 | break; 26 | case "bottom": 27 | marginDirection = "margin-top"; 28 | break; 29 | case "left": 30 | marginDirection = "margin-right"; 31 | break; 32 | } 33 | 34 | this.tag.css(marginDirection, get(busyLoadOptions, 'textMargin', ".5rem")); 35 | } 36 | } -------------------------------------------------------------------------------- /src/lib/defaults.js: -------------------------------------------------------------------------------- 1 | export default { 2 | spinner: "pump", // pump, accordion, pulsar, cube, cubes, circle-line, circles, cube-grid 3 | image: false, 4 | fontawesome: false, // "fa fa-refresh fa-spin fa-2x fa-fw" 5 | custom: false, // jQuery Object 6 | color: "#fff", 7 | background: "rgba(0, 0, 0, 0.21)", 8 | maxSize: "50px", // Integer/String only for spinners & images, not fontawesome & custom 9 | minSize: "20px", // Integer/String only for spinners & images, not fontawesome & custom 10 | text: false, 11 | textColor: false, // default is color 12 | textMargin: ".5rem", 13 | textPosition: "right", // left, right, top, bottom 14 | fontSize: "1rem", 15 | fullScreen: false, 16 | animation: false, // fade, slide 17 | animationDuration: "fast", // String, Integer 18 | containerClass: "busy-load-container", 19 | containerItemClass: "busy-load-container-item", 20 | spinnerClass: "busy-load-spinner", 21 | textClass: "busy-load-text", 22 | }; -------------------------------------------------------------------------------- /src/sass/_accordion.scss: -------------------------------------------------------------------------------- 1 | /* Accordion */ 2 | 3 | .spinner-accordion { 4 | margin: 100px auto; 5 | width: 50px; 6 | height: 40px; 7 | text-align: center; 8 | font-size: 10px; 9 | } 10 | 11 | .spinner-accordion>div { 12 | background-color: #333; 13 | height: 100%; 14 | width: 6px; 15 | display: inline-block; 16 | -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; 17 | animation: sk-stretchdelay 1.2s infinite ease-in-out; 18 | } 19 | 20 | .spinner-accordion.rect2 { 21 | -webkit-animation-delay: -1.1s; 22 | animation-delay: -1.1s; 23 | } 24 | 25 | .spinner-accordion .rect3 { 26 | -webkit-animation-delay: -1.0s; 27 | animation-delay: -1.0s; 28 | } 29 | 30 | .spinner-accordion .rect4 { 31 | -webkit-animation-delay: -0.9s; 32 | animation-delay: -0.9s; 33 | } 34 | 35 | .spinner-accordion.rect5 { 36 | -webkit-animation-delay: -0.8s; 37 | animation-delay: -0.8s; 38 | } 39 | 40 | @-webkit-keyframes sk-stretchdelay { 41 | 0%, 40%, 100% { 42 | -webkit-transform: scaleY(0.4) 43 | } 44 | 20% { 45 | -webkit-transform: scaleY(1.0) 46 | } 47 | } 48 | 49 | @keyframes sk-stretchdelay { 50 | 0%, 40%, 100% { 51 | transform: scaleY(0.4); 52 | -webkit-transform: scaleY(0.4); 53 | } 54 | 20% { 55 | transform: scaleY(1.0); 56 | -webkit-transform: scaleY(1.0); 57 | } 58 | } -------------------------------------------------------------------------------- /src/sass/_circle-line.scss: -------------------------------------------------------------------------------- 1 | .spinner-circle-line { 2 | margin: 10px auto 0; 3 | width: 70px; 4 | text-align: center; 5 | } 6 | 7 | .spinner-circle-line > div { 8 | width: 18px; 9 | height: 18px; 10 | background-color: #333; 11 | 12 | border-radius: 100%; 13 | display: inline-block; 14 | -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; 15 | animation: sk-bouncedelay 1.4s infinite ease-in-out both; 16 | } 17 | 18 | .spinner-circle-line .bounce1 { 19 | -webkit-animation-delay: -0.32s; 20 | animation-delay: -0.32s; 21 | } 22 | 23 | .spinner-circle-line .bounce2 { 24 | -webkit-animation-delay: -0.16s; 25 | animation-delay: -0.16s; 26 | } 27 | 28 | @-webkit-keyframes sk-bouncedelay { 29 | 0%, 80%, 100% { -webkit-transform: scale(0) } 30 | 40% { -webkit-transform: scale(1.0) } 31 | } 32 | 33 | @keyframes sk-bouncedelay { 34 | 0%, 80%, 100% { 35 | -webkit-transform: scale(0); 36 | transform: scale(0); 37 | } 40% { 38 | -webkit-transform: scale(1.0); 39 | transform: scale(1.0); 40 | } 41 | } -------------------------------------------------------------------------------- /src/sass/_circles.scss: -------------------------------------------------------------------------------- 1 | .spinner-circles { 2 | width: 40px; 3 | height: 40px; 4 | position: relative; 5 | text-align: center; 6 | 7 | -webkit-animation: sk-rotate 2.0s infinite linear; 8 | animation: sk-rotate 2.0s infinite linear; 9 | } 10 | 11 | .dot1, .dot2 { 12 | width: 60%; 13 | height: 60%; 14 | display: inline-block; 15 | position: absolute; 16 | top: 0; 17 | background-color: #333; 18 | border-radius: 100%; 19 | 20 | -webkit-animation: sk-bounce 2.0s infinite ease-in-out; 21 | animation: sk-bounce 2.0s infinite ease-in-out; 22 | } 23 | 24 | .dot2 { 25 | top: auto; 26 | bottom: 0; 27 | -webkit-animation-delay: -1.0s; 28 | animation-delay: -1.0s; 29 | } 30 | 31 | @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }} 32 | @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} 33 | 34 | @-webkit-keyframes sk-bounce { 35 | 0%, 100% { -webkit-transform: scale(0.0) } 36 | 50% { -webkit-transform: scale(1.0) } 37 | } 38 | 39 | @keyframes sk-bounce { 40 | 0%, 100% { 41 | transform: scale(0.0); 42 | -webkit-transform: scale(0.0); 43 | } 50% { 44 | transform: scale(1.0); 45 | -webkit-transform: scale(1.0); 46 | } 47 | } -------------------------------------------------------------------------------- /src/sass/_cube-grid.scss: -------------------------------------------------------------------------------- 1 | .spinner-cube-grid { 2 | width: 40px; 3 | height: 40px; 4 | } 5 | 6 | .spinner-cube-grid .sk-cube { 7 | width: 33%; 8 | height: 33%; 9 | background-color: #333; 10 | float: left; 11 | -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 12 | animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 13 | } 14 | .spinner-cube-grid .sk-cube1 { 15 | -webkit-animation-delay: 0.2s; 16 | animation-delay: 0.2s; } 17 | .spinner-cube-grid .sk-cube2 { 18 | -webkit-animation-delay: 0.3s; 19 | animation-delay: 0.3s; } 20 | .spinner-cube-grid .sk-cube3 { 21 | -webkit-animation-delay: 0.4s; 22 | animation-delay: 0.4s; } 23 | .spinner-cube-grid .sk-cube4 { 24 | -webkit-animation-delay: 0.1s; 25 | animation-delay: 0.1s; } 26 | .spinner-cube-grid .sk-cube5 { 27 | -webkit-animation-delay: 0.2s; 28 | animation-delay: 0.2s; } 29 | .spinner-cube-grid .sk-cube6 { 30 | -webkit-animation-delay: 0.3s; 31 | animation-delay: 0.3s; } 32 | .spinner-cube-grid .sk-cube7 { 33 | -webkit-animation-delay: 0s; 34 | animation-delay: 0s; } 35 | .spinner-cube-grid .sk-cube8 { 36 | -webkit-animation-delay: 0.1s; 37 | animation-delay: 0.1s; } 38 | .spinner-cube-grid .sk-cube9 { 39 | -webkit-animation-delay: 0.2s; 40 | animation-delay: 0.2s; } 41 | 42 | @-webkit-keyframes sk-cubeGridScaleDelay { 43 | 0%, 70%, 100% { 44 | -webkit-transform: scale3D(1, 1, 1); 45 | transform: scale3D(1, 1, 1); 46 | } 35% { 47 | -webkit-transform: scale3D(0, 0, 1); 48 | transform: scale3D(0, 0, 1); 49 | } 50 | } 51 | 52 | @keyframes sk-cubeGridScaleDelay { 53 | 0%, 70%, 100% { 54 | -webkit-transform: scale3D(1, 1, 1); 55 | transform: scale3D(1, 1, 1); 56 | } 35% { 57 | -webkit-transform: scale3D(0, 0, 1); 58 | transform: scale3D(0, 0, 1); 59 | } 60 | } -------------------------------------------------------------------------------- /src/sass/_cube.scss: -------------------------------------------------------------------------------- 1 | /* Cube */ 2 | 3 | .spinner-cube { 4 | width: 40px; 5 | height: 40px; 6 | background-color: #333; 7 | margin: 100px auto; 8 | -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; 9 | animation: sk-rotateplane 1.2s infinite ease-in-out; 10 | } 11 | 12 | @-webkit-keyframes sk-rotateplane { 13 | 0% { 14 | -webkit-transform: perspective(120px) 15 | } 16 | 50% { 17 | -webkit-transform: perspective(120px) rotateY(180deg) 18 | } 19 | 100% { 20 | -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) 21 | } 22 | } 23 | 24 | @keyframes sk-rotateplane { 25 | 0% { 26 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 27 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 28 | } 29 | 50% { 30 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 31 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 32 | } 33 | 100% { 34 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 35 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 36 | } 37 | } -------------------------------------------------------------------------------- /src/sass/_cubes.scss: -------------------------------------------------------------------------------- 1 | .spinner-cubes { 2 | width: 40px; 3 | height: 40px; 4 | position: relative; 5 | } 6 | 7 | .cube1, .cube2 { 8 | background-color: #333; 9 | width: 15px; 10 | height: 15px; 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | 15 | -webkit-animation: sk-cubemove 1.8s infinite ease-in-out; 16 | animation: sk-cubemove 1.8s infinite ease-in-out; 17 | } 18 | 19 | .cube2 { 20 | -webkit-animation-delay: -0.9s; 21 | animation-delay: -0.9s; 22 | } 23 | 24 | @-webkit-keyframes sk-cubemove { 25 | 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 26 | 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 27 | 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 28 | 100% { -webkit-transform: rotate(-360deg) } 29 | } 30 | 31 | @keyframes sk-cubemove { 32 | 25% { 33 | transform: translateX(42px) rotate(-90deg) scale(0.5); 34 | -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); 35 | } 50% { 36 | transform: translateX(42px) translateY(42px) rotate(-179deg); 37 | -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); 38 | } 50.1% { 39 | transform: translateX(42px) translateY(42px) rotate(-180deg); 40 | -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); 41 | } 75% { 42 | transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 43 | -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 44 | } 100% { 45 | transform: rotate(-360deg); 46 | -webkit-transform: rotate(-360deg); 47 | } 48 | } -------------------------------------------------------------------------------- /src/sass/_pulsar.scss: -------------------------------------------------------------------------------- 1 | /* Pulsar */ 2 | 3 | .spinner-pulsar { 4 | width: 40px; 5 | height: 40px; 6 | background-color: #333; 7 | border-radius: 100%; 8 | -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; 9 | animation: sk-scaleout 1.0s infinite ease-in-out; 10 | } 11 | 12 | @-webkit-keyframes sk-scaleout { 13 | 0% { 14 | -webkit-transform: scale(0) 15 | } 16 | 100% { 17 | -webkit-transform: scale(1.0); 18 | opacity: 0; 19 | } 20 | } 21 | 22 | @keyframes sk-scaleout { 23 | 0% { 24 | -webkit-transform: scale(0); 25 | transform: scale(0); 26 | } 27 | 100% { 28 | -webkit-transform: scale(1.0); 29 | transform: scale(1.0); 30 | opacity: 0; 31 | } 32 | } -------------------------------------------------------------------------------- /src/sass/_pump.scss: -------------------------------------------------------------------------------- 1 | .spinner-pump { 2 | width: 40px; 3 | height: 40px; 4 | position: relative; 5 | } 6 | 7 | .double-bounce1, .double-bounce2 { 8 | width: 100%; 9 | height: 100%; 10 | border-radius: 50%; 11 | background-color: #333; 12 | opacity: 0.6; 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | 17 | -webkit-animation: sk-bounce 2.0s infinite ease-in-out; 18 | animation: sk-bounce 2.0s infinite ease-in-out; 19 | } 20 | 21 | .double-bounce2 { 22 | -webkit-animation-delay: -1.0s; 23 | animation-delay: -1.0s; 24 | } 25 | 26 | @-webkit-keyframes sk-bounce { 27 | 0%, 100% { -webkit-transform: scale(0.0) } 28 | 50% { -webkit-transform: scale(1.0) } 29 | } 30 | 31 | @keyframes sk-bounce { 32 | 0%, 100% { 33 | transform: scale(0.0); 34 | -webkit-transform: scale(0.0); 35 | } 50% { 36 | transform: scale(1.0); 37 | -webkit-transform: scale(1.0); 38 | } 39 | } -------------------------------------------------------------------------------- /src/sass/_utils.scss: -------------------------------------------------------------------------------- 1 | .no-scroll { 2 | overflow: hidden; 3 | } -------------------------------------------------------------------------------- /src/sass/sass.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Spinners 3 | * 4 | * @see http://tobiasahlin.com/spinkit/ 5 | */ 6 | @import 'cube-grid'; 7 | @import 'circle-line'; 8 | @import 'circles'; 9 | @import 'cube'; 10 | @import 'cubes'; 11 | @import 'pump'; 12 | @import 'pulsar'; 13 | @import 'accordion'; 14 | @import 'utils'; 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/template/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 19 | 21 | 22 | 23 | 264 | 265 | 330 | 331 | 332 | 333 |
334 |

busy-load

335 |

A simple, but flexible loading-mask plugin for jQuery

336 |

Download on Github Download via npm use cdn

337 |
338 |
339 | 340 |
341 |
342 |

Documentation

343 |

See the full documentation on github .

344 |
345 |
346 |
347 |
348 | 349 |
350 |
351 |

Setup

352 |

Use $.busyLoadSetup() to preconfigure busy-load, so you don't have to set your default options all the time.

$.busyLoadSetup({ animation: "slide", background: "rgba(255, 152, 0, 0.86)" }); 353 |
354 |
355 |
356 |
357 |

Fullscreen

358 |

For a fullscreen-overlay use $.busyLoadFull()

$.busyLoadFull("show", { background: "rgba(0, 51, 101, 0.83)", image: "tardis", animate: "slide" });
359 | $.busyLoadFull("hide", { animate: "fade" });
360 |
361 | 362 |
363 |
364 |
365 |
366 | 367 | 368 |
369 |
370 |

Spinners

371 |

CSS

372 |

Choose one of the built in CSS-spinners.

373 |
374 |
375 |
376 |
377 |
378 |
379 |

spinner:

380 |
pump
381 |

Without any options, the default spinner will be pump

$("#el").busyLoad("show"); 382 |

383 |
384 |
385 |
386 |
387 |
388 |
389 |

spinner:

390 |
accordion
$("#el").busyLoad("show", { spinner: "accordion"
391 | }); 392 |

393 |
394 |
395 |
396 |
397 |
398 |
399 |

spinner:

400 |
pulsar
$("#el").busyLoad("show", { spinner: "pulsar"
401 | }); 402 |

403 |
404 |
405 |
406 |
407 |
408 |
409 |
410 |
411 |

spinner:

412 |
cube
$("#el").busyLoad("show", { spinner: "cube"
413 | }); 414 |

415 |
416 |
417 |
418 |
419 |
420 |
421 |

spinner:

422 |
cubes
$("#el").busyLoad("show", { spinner: "cubes"
423 | }); 424 |

425 |
426 |
427 |
428 |
429 |
430 |
431 |

spinner:

432 |
circle-line
$("#el").busyLoad("show", { spinner: "circle-line"
433 | }); 434 |

435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 |
443 |

spinner:

444 |
circles
$("#el").busyLoad("show", { spinner: "circles"
445 | }); 446 |

447 |
448 |
449 |
450 |
451 |
452 |
453 |

spinner:

454 |
cube-grid
$("#el").busyLoad("show", { spinner: "cube-grid"
455 | }); 456 |

457 |
458 |
459 |
460 |
461 |
462 |
463 | 464 |
465 |
466 |

Images

467 |

Use an image as spinner.

468 |
469 |
470 |
471 |
472 |
473 |
474 |

image:

475 |
source
$("#el").busyLoad("show", { background: "rgba(76, 175, 80, 0.73)",
476 | image: "data:image/gif;base64,R0lGODlhQAA..."
477 | }); 478 |

show 479 |
480 |
481 |
482 |
483 |
484 |
485 |

image:

486 |
tardis
487 |

An image is already included, base64 encoded.

$("#el").busyLoad("show", {
488 | image: "tardis",
489 | background: "rgba(0, 51, 101, 0.83)"
490 | }); show 491 |
492 |
493 |
494 |
495 |
496 |
497 | 498 |
499 |
500 |

Fontawesome

501 |

Include the fontawesome-library and use its spinners.

502 |
503 |
504 |
505 |
506 |
507 |
508 |

fontawesome:

509 |
icon class
510 |

add also fa-spin

$("#el").busyLoad("show", {
511 | fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw" }); 512 |

show 513 |
514 |
515 |
516 |
517 |
518 |
519 |

fontawesome:

520 |
icon class
521 |

add also fa-spin

$("#el").busyLoad("show", {
522 | fontawesome: "fa fa-cog fa-spin fa-3x fa-fw" }); 523 |

show 524 |
525 |
526 |
527 |
528 |
529 |
530 | 531 |
532 |
533 |

Custom

534 |

Pass in your own jQuery-Element. Here's a quick example:

535 |
536 |
537 |
538 |
539 | let count = 2121; 540 | let customElement = $("<div>", { 541 | id: "countdown", 542 | css: { "font-size" : "50px" }, text: count 543 | }); 544 | $("#el").busyLoad("show", { 545 | background: "brown", custom: customElement 546 | }); 547 | let interval = setInterval(function(){ 548 | count--; 549 | customElement.text(count); 550 | if (count <= 0) { 551 | clearInterval(interval); 552 | $("#el").busyLoad("hide"); 553 | return; 554 | } 555 | }, 1000); 556 |
557 |
558 |

show

559 |
560 |
561 |
562 | 563 |
564 | 565 |
566 |
567 |

Sizing

568 |

Use maxSize & minSize for sizing the spinner. This only works with CSS- & image-spinners.

569 |
570 |
571 |
572 |
573 |
574 |
575 |

max/minSize

576 |
size
577 |

Size a spinner

578 |

$("#el").busyLoad("show", {
579 | maxSize: "150px",
580 | minSize: "150px"
581 | });

582 |

show 583 |

584 |
585 |
586 |
587 |
588 |
589 |
590 |

max/minSize

591 |
size
592 |

Size an image

$("#el").busyLoad("show", {
593 | maxSize: "200px",
594 | minSize: "200px",
595 | background: "rgba(0, 51, 101, 0.83)",
596 | image: "tardis"
597 | }); 598 |

show 599 |
600 |
601 |
602 |
603 |
604 |
605 | 606 |
607 |
608 |

Text

Add text, position & style it. 609 |
610 |
611 |
612 |
613 |
614 |
615 |

text:

616 |
LOADING ...
617 |

$("#el").busyLoad("show", { text: "LOADING ..."
618 | });

619 |

show 620 |

621 |
622 |
623 |
624 |
625 |
626 |
627 |

spinner:

628 |
false
629 |

Explicitly hide the spinner.

$("#el").busyLoad("show", { text: "LOADING ...",
630 | spinner: false
631 | }); 632 |

show 633 |
634 |
635 |
636 |
637 |
638 |
639 |

textPosition:

640 |
left
$("#el").busyLoad("show", { text: "LOADING ...",
641 | textPosition: "left"
642 | }); 643 |

show 644 |
645 |
646 |
647 |
648 |
649 |
650 |
651 |
652 |

textPosition:

653 |
right
$("#el").busyLoad("show", { text: "LOADING ...",
654 | textPosition: "right"
655 | }); 656 |

show 657 |
658 |
659 |
660 |
661 |
662 |
663 |

textPosition:

664 |
top
$("#el").busyLoad("show", { text: "LOADING ...",
665 | textPosition: "top"
666 | }); 667 |

show 668 |
669 |
670 |
671 |
672 |
673 |
674 |

textPosition:

675 |
bottom
$("#el").busyLoad("show", { text: "LOADING ...",
676 | textPosition: "bottom"
677 | }); 678 |

show 679 |
680 |
681 |
682 |
683 | 684 |
685 |
686 |
687 |
688 |

textColor:

689 |
color
$("#el").busyLoad("show", {
690 | text: "LOADING ...",
691 | textColor: "white",
692 | color: "red",
693 | background: "brown"
694 | }); 695 |

show 696 |
697 |
698 |
699 |
700 |
701 |
702 |

textMargin:

703 |
size
$("#el").busyLoad("show", {
704 | text: "LOADING ...",
705 | textMargin: "3rem"
706 | }); 707 |

show 708 |
709 |
710 |
711 |
712 |
713 |
714 |

fontSize:

715 |
size
$("#el").busyLoad("show", {
716 | text: "LOADING ...",
717 | fontSize: "2rem"
718 | }); 719 |

show 720 |
721 |
722 |
723 |
724 |
725 |
726 | 727 |
728 |
729 |

Animation

730 |
731 |
732 |
733 |
734 |
735 |
736 |

animation:

737 |
false
$("#el").busyLoad("show", {
738 | animation: false
739 | }); 740 |

show 741 |
742 |
743 |
744 |
745 |
746 |
747 |

animation:

748 |
fade
$("#el").busyLoad("show", {
749 | animation: "fade"
750 | }); 751 |

show 752 |
753 |
754 |
755 |
756 |
757 |
758 |

animation:

759 |
slide
$("#el").busyLoad("show", {
760 | animation: "slide"
761 | }); 762 |

show 763 |
764 |
765 |
766 |
767 | 768 |
769 |
770 |
771 |
772 |

animationDuration:

773 |
slow/fast
$("#el").busyLoad("show", {
774 | animation: "fade",
775 | animationDuration: "slow"
776 | }); 777 |

show 778 |
779 |
780 |
781 |
782 |
783 |
784 |

animationDuration:

785 |
time
$("#el").busyLoad("show", {
786 | animation: "fade",
787 | animationDuration: 4000
788 | }); 789 |

show 790 |
791 |
792 |
793 |
794 |
795 |
796 | 797 |
798 |
799 |

Classes

800 |

Add your own-classes to the components of the overlay.

801 |
802 |
803 |
804 |
805 |
806 |
807 |

containerClass:

808 |
class
$("#el").busyLoad("show", {
809 | containerClass: "my-own-container-class"
810 | }); 811 |

show 812 |
813 |
814 |
815 |
816 |
817 |
818 |

containerItemClass:

819 |
class
$("#el").busyLoad("show", {
820 | containerItemClass: "my-own-container-item-class"
821 | }); 822 |

show 823 |
824 |
825 |
826 |
827 | 828 |
829 |
830 |
831 |
832 |

spinnerClass:

833 |
class
$("#el").busyLoad("show", {
834 | spinnerClass: "my-own-spinner-class"
835 | }); 836 |

show 837 |
838 |
839 |
840 |
841 |
842 |
843 |

textClass:

844 |
class
$("#el").busyLoad("show", {
845 | textClass: "my-own-text-class"
846 | }); 847 |

show 848 |
849 |
850 |
851 |
852 |
853 | 854 |
855 | 856 |
857 |
858 |

CSS-position

859 |
860 |
861 | 862 |
863 |
864 |

865 | If a container has a position of static, busy-load will turn it to relative, because otherwise the overlay would be positioned to a parent element other than static. 866 |

867 |
868 |
869 |
870 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 871 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 872 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 873 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 874 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 875 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 876 |
877 |

show 878 |
879 |
880 |
881 | 882 |
883 |

©2017 Andreas Stephan

884 |
885 | 886 | -------------------------------------------------------------------------------- /test/testrunner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | 31 | 33 | 35 | 39 | 41 | 43 | 45 | 47 | 48 | 49 | 51 | 56 | 57 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./config') 2 | 3 | // console.info(module.exports); --------------------------------------------------------------------------------