Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ehpc/bootstrap-waitingfor
"Waiting for..." modal dialog with progress bar for Bootstrap
https://github.com/ehpc/bootstrap-waitingfor
bootstrap javascript
Last synced: 13 days ago
JSON representation
"Waiting for..." modal dialog with progress bar for Bootstrap
- Host: GitHub
- URL: https://github.com/ehpc/bootstrap-waitingfor
- Owner: ehpc
- License: mit
- Created: 2014-05-24T16:09:07.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-04-15T19:58:41.000Z (over 1 year ago)
- Last Synced: 2024-10-15T04:22:57.552Z (29 days ago)
- Topics: bootstrap, javascript
- Language: JavaScript
- Size: 409 KB
- Stars: 138
- Watchers: 17
- Forks: 82
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bootstrap-waitingfor
"Waiting for..." modal dialog with progress bar for Bootstrap.
See this plugin in action:rocket:: 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:
```js
const waitingDialog = require('bootstrap-waitingfor');
```
## Using
In your javascript code write something like this:
```js
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:
```js
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
:fire:Before:fire: 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`
:sunflower:You should only modify files inside `src` or `test` directories!:sunflower: Files in the `build` directory are generated **automatically** after running `gulp`.
## Examples
HTML page example:
```html
boostrap-waitingfor
```