Admire
  • Introduction
  • Folder Structure
  • HTML
    • Introduction
    • HTML Structure
      • Header
      • Left Side Menu
      • Right Side Menu
      • Main Content
        • Buttons
        • Carousel and sliders
        • Charts
        • Icons
        • Progress Bars
        • Maps
        • Modals
        • Lock Screen
    • Plugins
    • FAQ's
    • Fonts Used
    • Start New Page
      • Black scheme
      • White scheme
    • Hide/Remove section
      • white scheme
      • Black scheme
  • Laravel Version
    • Installation
      • Previous Versions
        • Laravel 8
        • Laravel 7
        • Laravel 5.6
    • Layouts
      • default
      • Fixed header
      • Fixed menu
      • Fixed Menu Header
      • Compact Menu
    • Blank Page
    • How to change the layout
  • Updates
    • 3.x
    • 2.3
    • 2.8
    • 2.7
    • 2.2
    • 2.1
    • 2.0
    • 1.4
    • 1.3
Powered by GitBook
On this page

Was this helpful?

  1. HTML
  2. HTML Structure
  3. Main Content

Progress Bars

PreviousIconsNextMaps

Last updated 5 years ago

Was this helpful?

It has the following design:

Horizontal Progress Bar

<div class="progress">
    <div class="progress-bar" style="width: 70%;">Content</div>
</div>

parameters:

1) Background color - sets the color of the background. Can take values - progress-info, progress-success, progress-warning, progress-danger.

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 70%;">Content</div>
</div>

2) striped - uses a gradient to create a striped effect.

<div class="progress progress-striped">
   <div class="progress-bar" style="width: 70%;">Content</div>
</div>

3) animated striped - add.activeto.progress-stripedto animate the stripes right to left.

<div class="progress progress-striped active">
    <div class="progress-bar" style="width: 70%;">Content</div>
</div>

4) animated - sets the animation by adding the attributedata-appear-progress-animation.

<div class="progress" data-appear-progress-animation="70%">
   <div class="progress-bar">Content</div>
</div>