SusProgressLinear

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

Package

SusKit · Atoms (commercial)

SusKit · Atoms

Props

Name	Type	Default
`Value`	`Prop<float>`	`0f`
`Max`	`Prop<float>`	`100f`
`Height`	`Prop<float>`	`4f`
`Color`	`Prop<string>`	`"primary"`
`BgColor`	`Prop<string>`	`""`
`BgOpacity`	`Prop<float>`	`1f`
`BufferValue`	`Prop<float>`	`0f`
`Indeterminate`	`Prop<bool>`	`false`
`Active`	`Prop<bool>`	`true`
`Striped`	`Prop<bool>`	`false`
`Stream`	`Prop<bool>`	`false`
`Reverse`	`Prop<bool>`	`false`
`Absolute`	`Prop<bool>`	`false`
`Clickable`	`Prop<bool>`	`false`
`Rounded`	`Prop<string>`	`"md"`
`RoundedBar`	`Prop<bool>`	`false`
`ChunkCount`	`Prop<int>`	`0`
`ChunkGap`	`Prop<float>`	`4f`

Slots

Name
`(default)`

Events

Name	Field	Payload
`ValueChanged`	`OnValueChanged`	`float`

Style hooks

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

sus-hidden
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__indeterminate-bar--long
sus-progress-linear__indeterminate-bar--short
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--reduced
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.
Active (default true) shows or hides the bar through a class only: Active = false puts sus-progress-linear--inactive on the root (display: none); the component never writes style.display. So when you hide the bar yourself — sus-hidden or a skin rule on the bar — it stays hidden while Active is true.
The indeterminate and stream animations start again when the bar is removed from the tree and added back.
Reduce motion: while SusMotion.Reduce is on, the indeterminate track rests as one still band and the stream stripes stand still; the root gets sus-progress-linear--reduced. Turning the flag off resumes the running mode.

SusProgressLinear ​