Status Progress
Progress indicators showing completion status and loading states.
Native Progress Element
HTML
<progress value="3333" max="10000" aria-label="Upload progress">33%</progress>Basic Progress Bar
HTML
<div style="max-width: 400px">
<div
class="ss-c-progress_bar"
role="progressbar"
aria-label="Basic progress"
aria-valuenow="65"
aria-valuemin="0"
aria-valuemax="100"
style="
width: 100%;
height: 8px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
class="ss-c-progress_bar--fill"
style="
width: 65%;
height: 100%;
background: var(--ss-color-accent);
transition: width 0.3s;
"
></div>
</div>
</div>Progress with Label
Uploading file...
75%
HTML
<div style="max-width: 400px">
<div
style="
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 14px;
"
>
<span>Uploading file...</span>
<span>75%</span>
</div>
<div
class="ss-c-progress_bar"
role="progressbar"
aria-label="Uploading file"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
style="
width: 100%;
height: 10px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
class="ss-c-progress_bar--fill"
style="
width: 75%;
height: 100%;
background: var(--ss-color-accent);
"
></div>
</div>
</div>Progress Sizes
HTML
<div
style="
display: flex;
flex-direction: column;
gap: 20px;
max-width: 400px;
"
>
<!-- Small -->
<div>
<label
style="
font-size: 12px;
opacity: 0.7;
display: block;
margin-bottom: 4px;
"
>
Small
</label>
<div
class="ss-c-progress_bar ss-c-progress_bar--small"
role="progressbar"
aria-label="Small progress"
aria-valuenow="40"
aria-valuemin="0"
aria-valuemax="100"
style="
width: 100%;
height: 4px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-sm);
overflow: hidden;
"
>
<div
style="
width: 40%;
height: 100%;
background: var(--ss-color-accent);
"
></div>
</div>
</div>
<!-- Medium -->
<div>
<label
style="
font-size: 12px;
opacity: 0.7;
display: block;
margin-bottom: 4px;
"
>
Medium
</label>
<div
class="ss-c-progress_bar ss-c-progress_bar--medium"
role="progressbar"
aria-label="Medium progress"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="
width: 100%;
height: 8px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
style="
width: 60%;
height: 100%;
background: var(--ss-color-accent);
"
></div>
</div>
</div>
<!-- Large -->
<div>
<label
style="
font-size: 12px;
opacity: 0.7;
display: block;
margin-bottom: 4px;
"
>
Large
</label>
<div
class="ss-c-progress_bar ss-c-progress_bar--large"
role="progressbar"
aria-label="Large progress"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100"
style="
width: 100%;
height: 16px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-lg);
overflow: hidden;
"
>
<div
style="
width: 80%;
height: 100%;
background: var(--ss-color-accent);
"
></div>
</div>
</div>
</div>Colored Progress
HTML
<div
style="
display: flex;
flex-direction: column;
gap: 16px;
max-width: 400px;
"
>
<!-- Success -->
<div>
<label
style="font-size: 13px; display: block; margin-bottom: 6px"
>
Completed ✓
</label>
<div
class="ss-c-progress_bar"
role="progressbar"
aria-label="Completed"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
style="
width: 100%;
height: 10px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
style="
width: 100%;
height: 100%;
background: var(--ss-color-success);
"
></div>
</div>
</div>
<!-- Warning -->
<div>
<label
style="font-size: 13px; display: block; margin-bottom: 6px"
>
Storage Used ⚠
</label>
<div
class="ss-c-progress_bar"
role="progressbar"
aria-label="Storage used"
aria-valuenow="85"
aria-valuemin="0"
aria-valuemax="100"
style="
width: 100%;
height: 10px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
style="
width: 85%;
height: 100%;
background: var(--ss-color-warning);
"
></div>
</div>
</div>
<!-- Error -->
<div>
<label
style="font-size: 13px; display: block; margin-bottom: 6px"
>
Critical ✕
</label>
<div
class="ss-c-progress_bar"
role="progressbar"
aria-label="Critical"
aria-valuenow="95"
aria-valuemin="0"
aria-valuemax="100"
style="
width: 100%;
height: 10px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
style="
width: 95%;
height: 100%;
background: var(--ss-color-error);
"
></div>
</div>
</div>
<!-- Info -->
<div>
<label
style="font-size: 13px; display: block; margin-bottom: 6px"
>
Syncing ℹ
</label>
<div
class="ss-c-progress_bar"
role="progressbar"
aria-label="Syncing"
aria-valuenow="45"
aria-valuemin="0"
aria-valuemax="100"
style="
width: 100%;
height: 10px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
style="
width: 45%;
height: 100%;
background: var(--ss-color-info);
"
></div>
</div>
</div>
</div>Striped & Animated Progress
HTML
<div
style="
display: flex;
flex-direction: column;
gap: 20px;
max-width: 400px;
"
>
<!-- Striped -->
<div>
<label
style="font-size: 13px; display: block; margin-bottom: 6px"
>
Striped Pattern
</label>
<div
class="ss-c-progress_bar"
role="progressbar"
aria-label="Striped progress"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="
width: 100%;
height: 16px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-lg);
overflow: hidden;
"
>
<div
style="
width: 60%;
height: 100%;
background: repeating-linear-gradient(
45deg,
var(--ss-color-accent),
var(--ss-color-accent) 10px,
rgba(255, 255, 255, 0.2) 10px,
rgba(255, 255, 255, 0.2) 20px
);
"
></div>
</div>
</div>
<!-- Indeterminate -->
<div>
<label
style="font-size: 13px; display: block; margin-bottom: 6px"
>
Indeterminate Loading
</label>
<div
class="ss-c-progress_bar ss-c-progress_bar--indeterminate"
role="progressbar"
aria-label="Indeterminate loading"
style="
width: 100%;
height: 8px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-md);
overflow: hidden;
position: relative;
"
>
<div
style="
position: absolute;
width: 30%;
height: 100%;
background: var(--ss-color-accent);
animation: indeterminate 1.5s infinite linear;
border-radius: var(--ss-radius-md);
"
></div>
</div>
</div>
</div>
<style>
@keyframes indeterminate {
0% {
left: -30%;
}
100% {
left: 100%;
}
}
</style>Multi-Segment Progress
Storage Usage
78 GB / 100 GB
Documents
Photos
Videos
Free
HTML
<div style="max-width: 450px">
<div
style="
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 13px;
"
>
<span>Storage Usage</span>
<span>78 GB / 100 GB</span>
</div>
<div
class="ss-c-progress_bar"
role="progressbar"
aria-label="Storage usage"
aria-valuenow="78"
aria-valuemin="0"
aria-valuemax="100"
style="
width: 100%;
height: 20px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-lg);
overflow: hidden;
display: flex;
"
>
<div
style="
width: 45%;
height: 100%;
background: var(--ss-color-info);
"
title="Documents: 45GB"
></div>
<div
style="
width: 20%;
height: 100%;
background: var(--ss-color-success);
"
title="Photos: 20GB"
></div>
<div
style="
width: 13%;
height: 100%;
background: var(--ss-color-warning);
"
title="Videos: 13GB"
></div>
</div>
<div
style="
display: flex;
gap: 16px;
margin-top: 12px;
font-size: 12px;
flex-wrap: wrap;
"
>
<span style="display: flex; align-items: center; gap: 6px">
<span
style="
width: 12px;
height: 12px;
background: var(--ss-color-info);
border-radius: var(--ss-radius-sm);
"
></span>
Documents
</span>
<span style="display: flex; align-items: center; gap: 6px">
<span
style="
width: 12px;
height: 12px;
background: var(--ss-color-success);
border-radius: var(--ss-radius-sm);
"
></span>
Photos
</span>
<span style="display: flex; align-items: center; gap: 6px">
<span
style="
width: 12px;
height: 12px;
background: var(--ss-color-warning);
border-radius: var(--ss-radius-sm);
"
></span>
Videos
</span>
<span style="display: flex; align-items: center; gap: 6px">
<span
style="
width: 12px;
height: 12px;
background: var(--ss-color-line-secondary);
border-radius: var(--ss-radius-sm);
"
></span>
Free
</span>
</div>
</div>