bootstrap-waitingfor
"Waiting for..." modal dialog with progress bar for Bootstrap.
See this plugin in action
Features
- AMD-compatible
- Configurable
Installing
With bower
You can install this module with bower bower install bootstrap-waitingfor
and include the files from build
directory.
With npm
You can install this module with npm npm install --save bootstrap-waitingfor
and include it as shown:
const waitingDialog = require('bootstrap-waitingfor');
Using
In your javascript code write something like this:
waitingDialog.show('I\'m waiting'); setTimeout(function () { waitingDialog.hide(); }, 1000);
If you want to change the appearance of the modal, you can pass additional options:
waitingDialog.show('I\'m waiting', { dialogSize: 'm', progressType: 'success' }); setTimeout(function () { waitingDialog.hide(); }, 1000);
possible options for dialogSize
are
sm
- smallm
- normallg
- large
possible options for progressType are
success
danger
warning
info
Contributing
- Run
gulp
- Make sure
gulp
doesn't return any errors - Open
test/run.html
in your favorite browser - Make sure there are no errors in dev console
- Make sure all dialogs behave correctly
Setting up the environment:
- Install
Node.js
- Go to your project directory
- Run
npm install -g bower
- Run
npm install -g gulp
- Run
npm install
- Run
bower install
src
or test
directories!build
directory are generated automatically after running gulp
.
Examples
HTML page example:
<html> <head> <meta charset="utf-8"> <title>boostrap-waitingfor</title> <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <link href="bower_components/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" /> </head> <body> <script src="../bower_components/jquery/dist/jquery.min.js"></script> <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="../build/bootstrap-waitingfor.js"></script> </body> </html>