Skip to content

ProgressIndicator

Demos

Default ProgressIndicator is Circular

<ProgressIndicator />

Default Circular ProgressIndicator

<ProgressIndicator type="circular" />

Circular ProgressIndicator with a label in a horizontal direction

Vennligst vent ...

<ProgressIndicator
// label="Custom label ..."
type="circular"
show_label={true}
label_direction="horizontal"
/>

Circular ProgressIndicator with a label in a vertical direction

Vennligst vent ...

<ProgressIndicator
// label="Custom label ..."
type="circular"
show_label={true}
label_direction="vertical"
/>

Shows a large Circular ProgressIndicator with a static 50% in progress

<ProgressIndicator
type="circular"
progress="50"
size="large"
no_animation
/>

Circular ProgressIndicator with random value

Vennligst vent ...

const ChangeValue = () => {
const [value, setValue] = React.useState(50)
return (
<FormRow centered>
<ProgressIndicator
type="circular"
progress={value}
show_label
no_animation
/>
<Button
left
size="small"
variant="secondary"
onClick={() => setValue(Math.random() * 100)}
>
Change
</Button>
</FormRow>
)
}
render(<ChangeValue />)

Circular ProgressIndicator with random progress value to show the transition

const Example = () => {
const random = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min
const [progress, setProgressIndicator] = React.useState(random(1, 100))
React.useEffect(() => {
const timer = setInterval(
() => setProgressIndicator(random(1, 100)),
1e3
)
return () => clearInterval(timer)
})
return (
<ProgressIndicator type="circular" size="large" progress={progress} />
)
}
render(<Example />)

Circular ProgressIndicator with random on_complete callback

const Example = () => {
const random = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min
const [visible, setVisible] = React.useState(true)
React.useEffect(() => {
const timer = setInterval(
() => setVisible(!visible),
random(2400, 4200)
)
return () => clearTimeout(timer)
})
return (
<ProgressIndicator
type="circular"
size="large"
visible={visible}
on_complete={() => {
console.log('on_complete_circular')
}}
/>
)
}
render(<Example />)

Circular ProgressIndicator inside a Dialog

<Dialog
spacing={false}
maxWidth="12rem"
fullscreen={false}
alignContent="centered"
hideCloseButton
triggerAttributes={{
text: 'Show',
}}
preventClose={false}
>
<ProgressIndicator
type="circular"
show_label
label_direction="vertical"
top="large"
bottom="large"
size="large"
/>
</Dialog>

Default Linear ProgressIndicator

<ProgressIndicator type="linear" />

Small Linear ProgressIndicator

<ProgressIndicator type="linear" size="small" />

Linear ProgressIndicator with a label in a horizontal direction

Vennligst vent ...

<ProgressIndicator
type="linear"
// label="Custom label ..."
show_label={true}
label_direction="horizontal"
/>

Linear ProgressIndicator with a label in a vertical direction

Vennligst vent ...

<ProgressIndicator
type="linear"
// label="Custom label ..."
show_label={true}
label_direction="vertical"
/>

Shows a large Linear ProgressIndicator with a static 50% in progress

<ProgressIndicator
type="linear"
progress="50"
size="large"
no_animation
/>

Linear ProgressIndicator with random value

const ChangeValue = () => {
const [value, setValue] = React.useState(50)
return (
<FormRow centered>
<ProgressIndicator type="linear" progress={value} no_animation />
<Button
left
size="small"
variant="secondary"
onClick={() => setValue(Math.random() * 100)}
>
Change
</Button>
</FormRow>
)
}
render(<ChangeValue />)

Linear ProgressIndicator with random progress value to show the transition

const Example = () => {
const random = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min
const [progress, setProgressIndicator] = React.useState(random(1, 100))
React.useEffect(() => {
const timer = setInterval(
() => setProgressIndicator(random(1, 100)),
1e3
)
return () => clearInterval(timer)
})
return <ProgressIndicator type="linear" progress={progress} />
}
render(<Example />)

Linear ProgressIndicator with random on_complete callback

const Example = () => {
const random = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min
const [visible, setVisible] = React.useState(true)
React.useEffect(() => {
const timer = setInterval(
() => setVisible(!visible),
random(2400, 4200)
)
return () => clearTimeout(timer)
})
return (
<ProgressIndicator
type="linear"
size="large"
visible={visible}
on_complete={() => {
console.log('on_complete_linear')
}}
/>
)
}
render(<Example />)

Linear ProgressIndicator inside a Dialog

<Dialog
spacing={false}
maxWidth="12rem"
fullscreen={false}
alignContent="centered"
hideCloseButton
triggerAttributes={{
text: 'Show',
}}
preventClose={false}
>
<ProgressIndicator
type="linear"
show_label
label_direction="vertical"
top="large"
bottom="large"
/>
</Dialog>