Package Exports

bootstrap-4-waitingfor

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bootstrap-4-waitingfor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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🚀: 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:

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

🌻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>