Progress

<Progress> is a UI component that shows a bar to indicate the progress of a task.

See also: ActivityIndicator.

<Progress value="75" />

<progress value="75"></progress>

const [currentValue, setCurrentValue] = React.useState(0)
setInterval(() => {
  setCurrentValue(currentValue + 10)
  if (currentValue > 101) setCurrentValue(0)
}, 1000)

const [count, setCount] = createSignal(0)
setInterval(() => {
  setCount(count() + 1)
  if (count() === 101) setCount(0)
}, 100)

let currentValue = 0
setInterval(() => {
  currentValue++
  if (currentValue === 101) currentValue = 0
}, 100)

const currentValue = ref(0);
setInterval( () =>{
  currentValue.value ++;
  if(currentValue.value === 101)
    currentValue.value = 0;
}, 100);

Example ​

Styling the Progress bar ​

To style the Progress bar, set the backgroundColor and color.

The backgroundColor will be applied to the track, and the color will be applied to the bar itself.

<Progress
  value="75"
  backgroundColor="#fff"
  color="#000"
/>

Props ​

value ​

value: number

Gets or sets the current value of the progress bar.

Must be within the range of 0 to maxValue.

maxValue ​

maxValue: number

Gets or sets the maximum value of the progress bar.

Defaults to: 100.

...Inherited ​

For additional inherited properties, refer to the API Reference

Native component ​

• Android: android.widget.ProgressBar (indeterminate = false)
• iOS: UIProgressView