Progress Bars

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

-0%1%2%3%4%5%6%7%8%9%10%11%12%13%14%15%16%17%18%19%20%21%22%23%24%25%26%27%28%29%30%31%32%33%34%35%36%37%38%39%40%41%42%43%44%45%46%47%48%49%50%51%52%53%54%55%56%57%58%59%60%61%62%63%64%65%66%67%68%69%70%71%72%73%74%75%76%77%78%79%80%81%82%83%84%85%86%87%88%89%90%91%92%93%94%95%96%97%98%99%100%
-0%1%2%3%4%5%6%7%8%9%10%11%12%13%14%15%16%17%18%19%20%21%22%23%24%25%26%27%28%29%30%31%32%33%34%35%36%37%38%39%40%41%42%43%44%45%46%47%48%49%50%51%52%53%54%55%56%57%58%59%60%61%62%63%64%65%66%67%68%69%70%71%72%73%74%75%76%77%78%79%80%81%82%83%84%85%86%87%88%89%90%91%92%93%94%95%96%97%98%99%100%
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>