Reactive Graph - Design System

Progress: Default 

<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Progress

    </h1>
    <hr>
    <div>
        <progress max="100" value="0"></progress>
    </div>
    <div>
        <progress max="100" value="25"></progress>
    </div>
    <div>
        <progress max="100" value="50"></progress>
    </div>
    <div>
        <progress max="100" value="75"></progress>
    </div>
    <div>
        <progress max="100" value="100"></progress>
    </div>
    <div>
        <progress></progress>
    </div>
</div>
 
<div style="padding: var(--size-4);">
  <h1 class="mexican-pink">
    Progress
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}} max="100" value="0"></progress>
  </div>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}} max="100" value="25"></progress>
  </div>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}} max="100" value="50"></progress>
  </div>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}} max="100" value="75"></progress>
  </div>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}} max="100" value="100"></progress>
  </div>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}}></progress>
  </div>
</div>
 
{
  "modifier": ""
}

No notes defined.