Progress bars

Solid blue

View code

<div class="progress bg-brand-neutral-black">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 75%;"></div>
</div>

Solid pink

View code

<div class="progress bg-brand-neutral-black">
    <div class="progress-bar bg-brand-accent-pink" role="progressbar" style="width: 75%;"></div>
</div>

Gradient blue

In order to make the colour gradient run from 0% to 100%, we flip the progress bar so that the background is the gradient colour, and the bar is black.

View code

<div class="progress bg-gradient-primary justify-content-end">
    <div class="progress-bar bg-brand-neutral-black" role="progressbar" style="width: 25%;"></div>
</div>

Gradient yellow

View code

<div class="progress bg-gradient-accent-yellow justify-content-end">
    <div class="progress-bar bg-brand-neutral-black" role="progressbar" style="width: 25%;"></div>
</div>

Gradient blue to pink

View code

<div class="progress bg-gradient-primary-pink justify-content-end">
    <div class="progress-bar bg-brand-neutral-black" role="progressbar" style="width: 25%;"></div>
</div>