Progress

Progress bars component can be used for showing the progress of a task or action to the users. Progress supports for stacked bars, animated backgrounds, and text labels.

Usage

Example

Script


  let counter = 86;

  return (
    <div className={'mt-2'}>
      <CProgress
        color="dark"
        value={42}
        showValue
        className="mb-1 bg-white"
      />
      <CProgress
        value={counter}
        showValue
        className="mb-1 bg-white"
      />
      <CProgress className="mb-1 bg-white">
        <CProgressBar
          showValue
          value={counter*(6/10)+3}
          color="success"
          height="30px"
        />
        <CProgressBar
          showValue
          value={counter*(2.5/10)+3}
          color="warning"
        />
        <CProgressBar
          showValue
          value={counter*(1.5/10)+3}
          color="danger"
        />
      </CProgress>
      <hr/>
      <CProgress striped value={2 * 5} className="mb-1 bg-white" />
      <CProgress striped color="success" value={25} className="mb-1 bg-white" />
      <CProgress animated striped showValue color="info" value={50} className="mb-1 bg-white" />
      <CProgress animated striped showValue color="warning" value={75} className="mb-1 bg-white" />
      <CProgress animated striped color="danger" value={100} className="mb-1 bg-white" />
      <hr/>
      <CProgress size="xs" value={2 * 5} className="mb-1 bg-white" />
      <CProgress size="sm" color="success" value={25} className="mb-1 bg-white" />
    </div>
  )

# Features

Single or splitted progress bar
Diffrent widths heights and styles available
Concise syntax for single bar

# Progress API

Name	Type	Default Value
children	any
children components
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
size	string
the size of progress
value	(string \| number)	0
value of the progress bar
max	(string \| number)	100
maximum value of progress
animated	boolean
enable animated striped styling (If enabled setting striped prop is not necessary)
striped	boolean
enable striped styling
color	string
background color of the component
precision	number	0
precision in displaying progress value
showPercentage	boolean
show precentage value with '%' character as label
showValue	boolean
show passed value as label

ProgressBar

Use as a child component of CProgress when you want to split progress bar into multiple bars.

# ProgressBar API

Name	Required	Type	Default Value
children		any
children components
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag
value		number
value of the progress bar
max		number
maximum value of progress
animated		boolean
enable animated striped styling (If enabled setting striped prop is not necessary)
striped		boolean
enable striped styling
color		string
background color of the component
precision		number
precision in displaying progress value
showPercentage		boolean
show precentage value with '%' character as label
showValue		boolean
show passed value as label