Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Layout
Forms
Components
Accordion CollapseAlertBadgeBoxBreadcrumbButtonCardDropdownLoaderModalPaginationProgress BarDashedStepsTabsTagToastToolip
Utilities
Styleguide

Progress Bar

To change color just change background- class to color that you need.

To see all the colors and their variations go to the Styleguide page

<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    style="width: 25%"
    aria-valuenow="25"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>
<div class="progress">
  <div
    class="progress-bar background-lilac"
    role="progressbar"
    style="width: 75%"
    aria-valuenow="75"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>

Dashed

To dashe the bar use the class .background-dashed

<div class="progress">
  <div
    class="progress-bar background-dashed"
    role="progressbar"
    style="width: 50%"
    aria-valuenow="50"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>