clear
  • Introduction
  • HTML
  • Html Structure
    • Header
    • Left Side Menu
    • Right Side Menu
    • Main Content
      • Buttons
      • Font Icons
      • Progress Bars
      • Maps
      • Lock Screen
  • FAQ's
  • SCSS
  • CSS Files
  • Javascript Files
  • Plugins
  • Start New Page
    • Menu Bar Fold
    • Boxed and Moveable Header
    • Moveable Header
    • Boxed and Fixed Header
    • Fixed Header and Menu
  • Vue Version
    • Basic Installation
      • Clear 1.7 installation
    • Basic Structure
      • Layout structure
      • Leftmenu structure
      • Start New Page
      • Changing layouts
  • Changing Color Scheme
  • Laravel Spark Skin
    • Spark Installation
    • Using .vue files
    • Adding External Plugins
  • Laravel Version
    • Changing skin
    • Changing Layouts
Powered by GitBook
On this page

Was this helpful?

  1. Html Structure
  2. Main Content

Progress Bars

PreviousFont IconsNextMaps

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>