#Description
Use a ProgressIndicator whenever the user has to wait for more than 150ms. This component is also knows as:
- Indicator (Activity-Indicator)
- Loader (Pre-loader)
- Spinner
#Demos
#Default ProgressIndicator is Circular
#Default Circular ProgressIndicator
<ProgressIndicator
type="circular"
/>
#Circular ProgressIndicator with a label in a horizontal direction
<ProgressIndicator
type="circular"
show_label="true"
label_direction="horizontal"
/>
#Circular ProgressIndicator with a label in a vertical direction
<ProgressIndicator
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
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 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}
/>
)
}
#Circular ProgressIndicator with random on_complete callback
() => {
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')
}}
/>
)
}
#Circular ProgressIndicator inside a Modal
<Modal
spacing={false}
max_width="12rem"
fullscreen={false}
align_content="centered"
hide_close_button
trigger_text="Show"
prevent_close={false}
>
<ProgressIndicator
type="circular"
show_label
label_direction="vertical"
top="large"
bottom="large"
size="large"
/>
</Modal>
#Default Linear ProgressIndicator
<ProgressIndicator
type="linear"
/>
#Small Linear ProgressIndicator
<ProgressIndicator
type="linear"
size="small"
/>
#Linear ProgressIndicator with a label in a horizontal direction
<ProgressIndicator
type="linear"
show_label="true"
label_direction="horizontal"
/>
#Linear ProgressIndicator with a label in a vertical direction
<ProgressIndicator
type="linear"
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 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}
/>
)
}
#Linear ProgressIndicator with random on_complete callback
() => {
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')
}}
/>
)
}
#Linear ProgressIndicator inside a Modal
<Modal
spacing={false}
max_width="12rem"
fullscreen={false}
align_content="centered"
hide_close_button
trigger_text="Show"
prevent_close={false}
>
<ProgressIndicator
type="linear"
show_label
label_direction="vertical"
top="large"
bottom="large"
/>
</Modal>