Info about Fork
This is a fork of ehpc/bootstrap-waitingfor with bootstrap 4 support.
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-4-waitingfor and include the files from build directory.
With npm
You can install this module with npm npm install --save bootstrap-4-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
successdangerwarninginfo
Contributing
- Run
gulp - Make sure
gulpdoesn't return any errors - Open
test/run.htmlin 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>