All Projects → yury-dymov → react-bootstrap-button-loader

yury-dymov / react-bootstrap-button-loader

Licence: MIT License
React ButtonLoader with Bootstrap flavor

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-bootstrap-button-loader

awesome-web-styling
Awesome Web Styling with CSS Animation Effects ⭐️
Stars: ✭ 109 (+336%)
Mutual labels:  button, spinner
Vue Element Loading
⏳ Loading inside a container or full screen for Vue.js
Stars: ✭ 234 (+836%)
Mutual labels:  loader, spinner
Ng Block Ui
Block UI Loader/Spinner for Angular
Stars: ✭ 135 (+440%)
Mutual labels:  loader, spinner
Swiftloader
A simple and beautiful activity indicator written in Swift
Stars: ✭ 116 (+364%)
Mutual labels:  loader, spinner
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-16%)
Mutual labels:  loader, spinner
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (+408%)
Mutual labels:  loader, spinner
React Loading Overlay
Loading overlays with fade, spinner, message support.
Stars: ✭ 218 (+772%)
Mutual labels:  loader, spinner
Aframe Preloader Component
A preloading bar that automatically displays while scene assets load.
Stars: ✭ 27 (+8%)
Mutual labels:  loader, spinner
loading
Laravel package to add loading indicator to pages while page is loading.
Stars: ✭ 38 (+52%)
Mutual labels:  loader, spinner
Text Spinners
Pure text, CSS only, font independent, inline loading indicators
Stars: ✭ 2,728 (+10812%)
Mutual labels:  loader, spinner
Materialactivityindicator
Material Activity Indicator
Stars: ✭ 109 (+336%)
Mutual labels:  loader, spinner
InstagramActivityIndicator
Activity Indicator similar to Instagram's
Stars: ✭ 49 (+96%)
Mutual labels:  loader, spinner
Csspin
CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner
Stars: ✭ 1,019 (+3976%)
Mutual labels:  loader, spinner
Jtmaterialspinner
An iOS material design spinner view
Stars: ✭ 127 (+408%)
Mutual labels:  loader, spinner
Css Spinner
small, elegant pure css spinner for ajax or loading animation
Stars: ✭ 1,013 (+3952%)
Mutual labels:  loader, spinner
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+7376%)
Mutual labels:  loader, spinner
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+2996%)
Mutual labels:  loader, spinner
Vue Loading Overlay
Vue.js component for full screen loading indicator 🌀
Stars: ✭ 784 (+3036%)
Mutual labels:  loader, spinner
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (+916%)
Mutual labels:  loader, spinner
SSSwiftUISpinnerButton
SSSwiftUISpinnerButton is a collection of various spinning animations for buttons in SwiftUI.
Stars: ✭ 37 (+48%)
Mutual labels:  loader, button

react-bootstrap-button-loader

Bootstrap Button with Spinner feature

react-bootstrap-button-loader

npm version Downloads Build Status Coverage Status

Versioning

  • v2 supports React Bootstrap v1.0.0+
  • v1 supports React Bootstrap v0.x.x

Demo

Demo and playground are available here

Usage Example

import Button from 'react-bootstrap-button-loader';

<Button loading={this.state.loading}>Press me!</Button>

Configurable Props

Note: All props are optional.

bsStyle: string, default: null

Bootstrap style, supported values: default, primary, success, info, warning, danger, link.

Deprecated in a favor of variant

disabled: boolean, default: false

Set this prop true to disable button.

Note: button in loading state is disabled and this behavior is not overridable even if false value is explicitly provided.

loading: boolean, default: false

This prop controls Button loading state.

While loading, Button is disabled and icon provided via props is replaced with Spinner.

icon: node, default: null

Buttons with icons are better!

Provided icon is shown if Button is not in a loading state. Otherwise Spinner is rendered.

spinAlignment: string, default 'left'

Controls spinAlignment, supported values: 'left' and 'right'

spinColor: string, default: '#fff'

Spinner color for loading state.

While white color used by default works fine for most cases, for different bootstrap themes and bsStyles it might be better to use other colors instead.

variant: string, default: 'primary'

Bootstrap style, supported values: primary, ``secondary, success`, `info`, `warning`, `danger`, `link`, `light`, `dark`.

License

MIT (c) Yury Dymov

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].