Product Selector

Fusion 5.9
    Fusion 5.9

    Progress Bars

    Table of Contents

    Default

    Example

    <div styling="progress-bar">
    <div styling="progress-bar-fill" style="width: 66%"></div>
</div>

    Background Color

    All background colors can be use to change the color of the bar

    Example

    <div styling="progress-bar">
    <div styling="progress-bar-fill bg-sunflower" style="width: 33%"></div>
</div>

    Radial

    Example

    <layout:grid>
  <layout:block sm="1-2">
    <progress:radial percentage="33"></progress:radial>
  </layout:block>
  <layout:block sm="1-2">
    <progress:radial percentage="88" fill-class="tk-stl-bg-raspberry" percentage-class="tk-stl-text-raspberry"></progress:radial>
  </layout:block>
</layout:grid>