ProgressIndicator

Info
Demos
Properties
Events

Description

Use a ProgressIndicator whenever the user has to wait for more than 150ms. This component is also known as:

  • Indicator (Activity-Indicator)
  • Loader (Pre-loader)
  • Spinner

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 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

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 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>