bw

bootstrap-waitingfor

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

Showing:

Popularity

Downloads/wk

101

GitHub Stars

137

Maintenance

Last Commit

3mos ago

Contributors

12

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

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>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial