Progress

You can use the Progress component to display simple or complex progress bars.

Basic Example

You can change the bar's color using the theme prop. The default value is primary.

import React from "react";
import { Progress } from "shards-react";

export default function BasicProgress() {
  return <Progress theme="primary" value={50} />;
}

Labels

You can add labels to your progress bars by providing the value inside of them.

import React from "react";
import { Progress } from "shards-react";

export default function BasicProgress() {
  return <Progress value="20">20</Progress>;
}

Multiple

Inside the Progress component you can also nest multiple sub-components.

import React from "react";
import { Progress } from "shards-react";

export default function BasicProgress() {
  return (
    <Progress multi>
      <Progress bar value="50" />
      <Progress bar theme="success" value="20" />
    </Progress>
  );
}

Props

The following props are available for the Progress component.

Prop	Description	Type	Default	Required
children	The children nodes.	`Node`	-	No
bar	Whether it is a bar, or not.	`Bool`	-	No
multi	Whether there are multiple progress bars nested, or not.	`Bool`	-	No
tag	The component's tag type.	`String`	`"div"`	No
animated	Whether it is animated, or not.	`Bool`	-	No
striped	Whether it is striped, or not.	`Bool`	-	No
theme	The theme color.	`String`	`"primary"`	No
className	The class name.	`String`	-	No
barClassName	The class name for the bar element.	`String`	-	No
value	The value.	`StringNumber`	`0`	No
max	The max value.	`StringNumber`	`100`	No