Skip to content
Home

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