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>