ehpc / Bootstrap Waitingfor
Licence: mit
"Waiting for..." modal dialog with progress bar for Bootstrap
Stars: ✭ 137
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Bootstrap Waitingfor
Devextreme Reactive
Business React components for Bootstrap and Material-UI
Stars: ✭ 1,800 (+1213.87%)
Mutual labels: bootstrap
Ruoyi Oracle
(RuoYi)官方仓库 基于SpringBoot的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用
Stars: ✭ 134 (-2.19%)
Mutual labels: bootstrap
Ng Pi Admin
Angular admin http://treesflower.com/ng-pi-admin
Stars: ✭ 131 (-4.38%)
Mutual labels: bootstrap
Lc Design
A UI component framework for building LCUI application.
Stars: ✭ 134 (-2.19%)
Mutual labels: bootstrap
Tabler React
React components and demo for the Tabler UI theme.
Stars: ✭ 1,830 (+1235.77%)
Mutual labels: bootstrap
React Redux Bootstrap Webpack Starter
React 16.9 + Typescript + React-Router 4 + Redux + Bootstrap 4 + Hot Reload + redux-devtools-extension + Webpack 4 + styled-components STARTER
Stars: ✭ 133 (-2.92%)
Mutual labels: bootstrap
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+7978.83%)
Mutual labels: bootstrap
Pretty Checkbox
A pure CSS library to beautify checkbox and radio buttons.
Stars: ✭ 1,708 (+1146.72%)
Mutual labels: bootstrap
Cakephp3 Bootstrap Helpers
CakePHP 3.x Helpers for Bootstrap 3 and 4.
Stars: ✭ 134 (-2.19%)
Mutual labels: bootstrap
Bselect
DEPRECATED - The select decorator component that was missing for Twitter Bootstrap.
Stars: ✭ 129 (-5.84%)
Mutual labels: bootstrap
Bootstrap.native
If you are looking for Bootstrap without jQuery, this is it.
Stars: ✭ 1,693 (+1135.77%)
Mutual labels: bootstrap
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (-7.3%)
Mutual labels: bootstrap
Shards Ui
🎨Shards is a beautiful & modern Bootstrap 4 UI kit packed with extra templates and components.
Stars: ✭ 1,718 (+1154.01%)
Mutual labels: bootstrap
Coreui Free Bootstrap Admin Template
CoreUI is free bootstrap admin template
Stars: ✭ 11,038 (+7956.93%)
Mutual labels: bootstrap
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
successdangerwarninginfo
Contributing
🔥Before🔥 making a pull request do the following steps:
- Run
gulp - Make sure
gulpdoesn't return any errors - Open
test/run.htmlin 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>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].