Search within TutorialsPark

Twitter Bootstrap Progress Bars


Use Progress Bars to denote Loading of an asset or current progress


Twitter Bootstrap: Default Progress Bars

1. A progress bar is used to provide a real-time feedback on the progress of the work

2. A progress bar can be created using class .progress-bar within <div> element.

3. Use the style attribute to set the width using percentage.

Example: Twitter Bootstrap Default Progress Bar with Variations

Give it a TRY! »

Twitter Bootstrap: Contextual Alternatives of Progress Bar

1. The progress bars uses the same classes as buttons and alerts to create contextual alternatives.

2. The available styles are progress-bar-* with values as success , info , warning , danger.

Example:Twitter Bootstrap Contextual Alternatives of Progress Bar

Give it a TRY! »

Twitter Bootstrap: Striped Progress bars

1. A gradient can be used to create a striped effect using class .progress-striped .

Example:Twitter Bootstrap Striped Progress Bars

Give it a TRY! »

Twitter Bootstrap: Animated Progress Bars

1. To create an animated progress bar add .active to .progress-stripped class.

2. The striped are animated from right to left.

Example:Twitter Bootstrap Animated Progress Bars

Give it a TRY! »

Twitter Bootstrap: Stacked Progress Bars

1. To create a stacked progress bar, put multiple progress bars within the .progress .

Example:Twitter Bootstrap Stacked Progress Bars

Give it a TRY! »

Twitter Bootstrap: Text within Progress Bars

1.The element <blockquote> is to denote quotes from an outside source .

2.The source is specified using <small> element and the name of the source is specified using <cite> element.

Example:Twitter Bootstrap Text within Progress bars

Give it a TRY! »