Skip to content
"Waiting for..." modal dialog with progress bar for Bootstrap
Branch: master
Clone or download
ehpc Merge pull request #31 from allinonemovie/master
Added examples for options to README.md
Latest commit 6a4f04c Apr 28, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
src Adding support for Bootstrap 4 Dec 18, 2017
test Fixed PR13, modified some code style rules, added some tests Dec 5, 2015
.gitignore moved 'message' code to src, added some tests Nov 16, 2015
.jscsrc Fixed PR13, modified some code style rules, added some tests Dec 5, 2015
.jshintrc Fixed PR13, modified some code style rules, added some tests Dec 5, 2015
.travis.yml Create .travis.yml Oct 23, 2015
COMMIT.md Minor changes Feb 22, 2018
LICENSE Initial commit May 24, 2014
README.md Added examples for options to README.md Apr 28, 2018
bower.json Minor changes Feb 22, 2018
gulpfile.js Jscs Sep 5, 2015
package.json Minor changes Feb 22, 2018

README.md

bootstrap-waitingfor

"Waiting for..." modal dialog with progress bar for Bootstrap.

See this plugin in action🚀: http://bootsnipp.com/snippets/featured/quotwaiting-forquot-modal-dialog

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 - small
  • m - normal
  • lg - large

possible options for progressType are

  • success
  • danger
  • warning
  • info

Contributing

🔥Before🔥 making a pull request do the following steps:

  1. Run gulp
  2. Make sure gulp doesn't return any errors
  3. Open test/run.html in your favorite browser
  4. Make sure there are no errors in dev console
  5. Make sure all dialogs behave correctly

Setting up the environment:

  1. Install Node.js
  2. Go to your project directory
  3. Run npm install -g bower
  4. Run npm install -g gulp
  5. Run npm install
  6. Run bower install

🌻You should only modify files inside src or test directories!🌻 Files in the 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>
You can’t perform that action at this time.