"Waiting for..." modal dialog with progress bar for Bootstrap
MIT License
"Waiting for..." modal dialog with progress bar for Bootstrap.
See this plugin in action🚀: http://bootsnipp.com/snippets/featured/quotwaiting-forquot-modal-dialog
You can install this module with bower bower install bootstrap-waitingfor
and include the files from build
directory.
You can install this module with npm npm install --save bootstrap-waitingfor
and include it as shown:
const waitingDialog = require('bootstrap-waitingfor');
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
- largepossible options for progressType are
success
danger
warning
info
🔥Before🔥 making a pull request do the following steps:
gulp
gulp
doesn't return any errorstest/run.html
in your favorite browserSetting up the environment:
Node.js
npm install -g bower
npm install -g gulp
npm install
bower install
🌻You should only modify files inside src
or test
directories!🌻 Files in the build
directory are generated automatically after running gulp
.
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>