Svelte Progress

The Svelte progress components can be used to show a user how far along he/she is in a process. These Svelte progress bars are built with two HTML elements, some CSS to set the width, and a few attributes. Now keep reading some examples to see how Svelte Progress bars work.

Example

Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60% 
<div class="progress-wrapper">
  <div class="progress-default">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <BaseProgress
                 type="default"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </BaseProgress>
</div>

<div class="progress-wrapper">
  <div class="progress-primary">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <BaseProgress
                 type="primary"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </BaseProgress>
</div>

<div class="progress-wrapper">
  <div class="progress-secondary">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <BaseProgress
                 type="secondary"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </BaseProgress>
</div>

<div class="progress-wrapper">
  <div class="progress-info">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <BaseProgress
                 type="info"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </BaseProgress>
</div>

<div class="progress-wrapper">
  <div class="progress-success">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <BaseProgress
                 type="success"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </BaseProgress>
</div>

<div class="progress-wrapper">
  <div class="progress-danger">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <BaseProgress
                 type="danger"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </BaseProgress>
</div>

<div class="progress-wrapper">
  <div class="progress-warning">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <BaseProgress
                 type="warning"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </BaseProgress>
</div>