Skip to content

SusProgressLinear

SusProgressLinear

Horizontal bar progress — determinate, buffer, striped, or indeterminate.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

NameTypeDefault
ValueProp<float>0f
MaxProp<float>100f
HeightProp<float>4f
ColorProp<string>"primary"
BgColorProp<string>""
BgOpacityProp<float>1f
BufferValueProp<float>0f
IndeterminateProp<bool>false
ActiveProp<bool>true
StripedProp<bool>false
StreamProp<bool>false
ReverseProp<bool>false
AbsoluteProp<bool>false
ClickableProp<bool>false
RoundedProp<string>"md"
RoundedBarProp<bool>false
ChunkCountProp<int>0
ChunkGapProp<float>4f

Slots

Name
(default)

Events

NameFieldPayload
ValueChangedOnValueChangedfloat

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

  • sus-progress-linear
  • sus-progress-linear__background
  • sus-progress-linear__buffer
  • sus-progress-linear__chunk
  • sus-progress-linear__chunk-fill
  • sus-progress-linear__chunks
  • sus-progress-linear__content
  • sus-progress-linear__fill
  • sus-progress-linear__indeterminate
  • sus-progress-linear__indeterminate-bar
  • sus-progress-linear__stream
  • sus-progress-linear--absolute
  • sus-progress-linear--active
  • sus-progress-linear--chunked
  • sus-progress-linear--clickable
  • sus-progress-linear--color-danger
  • sus-progress-linear--color-info
  • sus-progress-linear--color-secondary
  • sus-progress-linear--color-success
  • sus-progress-linear--color-warning
  • sus-progress-linear--inactive
  • sus-progress-linear--indeterminate
  • sus-progress-linear--reverse
  • sus-progress-linear--rounded-bar
  • sus-progress-linear--stream
  • sus-progress-linear--striped

Usage

xml
<template>
  <sus:SusProgressLinear :Value="LoadPct.Value"
                         Max="100"
                         Color="primary"
                         Height="6"
                         Rounded="md" />
</template>

<script>
public Prop<float> LoadPct = new(65f);
</script>
csharp
var bar = new SusProgressLinear();
bar.Value.Value = 40f;
bar.BufferValue.Value = 70f;
bar.Color.Value = "success";
bar.Striped.Value = true;
// Indeterminate: bar.Indeterminate.Value = true;

Notes

  • BufferValue draws a secondary track (e.g. buffered media).
  • ChunkCount / ChunkGap split the fill into segments.
  • Default slot sits over the bar for an inline label.