Bootstrap's Progress bar

Forms SharePoint 2019
1

Hi,

We would like to show users progress of their job in form. We already dynamically measure percentage of their job.
We tried to add bootstraps progress bar, but it works very weird.

For instance:

        let contentProgress = '<p><b> Your progress: </b></p>' + 
        '<div class="progress border"><div class="progress-bar bg-secondary" style="width:30%"></div></div>'
        $('.classProgress').html(contentProgress)

renders as:

image
image794×65 212 Bytes

Standard HTML progress indicator:

<progress value="70" max="100">70 %</progress>

works fine. But only fine...
Bootstraps progress bar is much nicer.

What do we do wrong?

Regards

2

Hello @Marcin,

Use the bg-primary class instead of the bg-secondary:

let contentProgress = '<p><b> Your progress: </b></p>' +
    '<div class="progress border"><div class="progress-bar bg-primary" style="width:30%"></div></div>'
$('.classProgress').html(contentProgress)

image
image1031×142 1.74 KB

3

Well, thank you for quick reply.
Does it mean, that only one colour is available here? The idea for bootstrap progress bar against html progress bar was to get some colours.
Example: Users are filling form with mandatory, optional and informational items. The goal was to show them either 3 bars with colours relative to priority or one bar with 3 colours.

Of course it is just fine tunning, nice to have. Nothing that we can not live without. :slight_smile:

4

@Marcin,

You can replace bg-primary class with my-class and specify any color you like for the progress bar:

.my-class {
    background-color: red;
}