How To
Documentation
    Learn More

      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>