Progress Bar

Accueil - Progress Bar

Control Colors

Each progress bar can have a different filled / unfilled color and text color.

[vc_progress_bar values= »%5B%7B%22label%22%3A%22%20Marketing%20Strategy%22%2C%22value%22%3A%2295%22%7D%5D » bgcolor= »bar_blue » options= »striped,animated » units= »% » css= ».vc_custom_1502094304456{margin-bottom: 20px !important;} »][vc_progress_bar values= »%5B%7B%22label%22%3A%22%20Customers%20Referred%20Daily%22%2C%22value%22%3A%2280%22%7D%5D » bgcolor= »custom » options= »striped,animated » units= »% » custombgcolor= »#49afcd » customtxtcolor= »#171721″ css= ».vc_custom_1502094312859{margin-bottom: 20px !important;} »][vc_progress_bar values= »%5B%7B%22label%22%3A%22Repeat%20Business%20From%20Clients%22%2C%22value%22%3A%2285%22%7D%5D » bgcolor= »custom » options= »striped,animated » units= »% » custombgcolor= »#5bb75b » customtxtcolor= »#171721″]

Animated Striped Bars

Each progress bar can have a striped or solid fill, and the stripes can animate.

[vc_progress_bar values= »%5B%7B%22label%22%3A%22%20Solid%20Progress%20Bar%22%2C%22value%22%3A%2280%22%7D%5D » bgcolor= »bar_blue » units= »% » css= ».vc_custom_1502094933962{margin-bottom: 20px !important;} »][vc_progress_bar values= »%5B%7B%22label%22%3A%22%20Striped%20Progress%20Bar%22%2C%22value%22%3A%2285%22%7D%5D » bgcolor= »bar_blue » options= »striped » units= »% » css= ».vc_custom_1502094781675{margin-bottom: 20px !important;} »][vc_progress_bar values= »%5B%7B%22label%22%3A%22Animated%20Striped%20Progress%20Bar%22%2C%22value%22%3A%2295%22%7D%5D » bgcolor= »bar_blue » options= »striped,animated » units= »% » css= ».vc_custom_1502094794586{margin-bottom: 20px !important;} »]

Unit Control

Each progress bar can have a different unit symobl, or left empty for no unit.

[vc_progress_bar values= »%5B%7B%22label%22%3A%22%20Progress%20Bar%20With%20No%20Unit%22%2C%22value%22%3A%2280%22%7D%5D » bgcolor= »bar_green » css= ».vc_custom_1502095146546{margin-bottom: 20px !important;} »][vc_progress_bar values= »%5B%7B%22label%22%3A%22%20Progress%20Bar%20With%20Different%20Unit%22%2C%22value%22%3A%2285%22%7D%5D » bgcolor= »bar_green » units= »% » css= ».vc_custom_1502095156079{margin-bottom: 20px !important;} »][vc_progress_bar values= »%5B%7B%22label%22%3A%22%20Progress%20Bar%20With%20Different%20Unit%22%2C%22value%22%3A%2295%22%7D%5D » bgcolor= »bar_green » units= »£ » css= ».vc_custom_1502095164340{margin-bottom: 20px !important;} »]