Progress

progress bar is a component which displays progress of a process in which user is involved. Their color, shape, and animation can be customized.

If it takes too long for your website to load up, your user will be less stressed about it when he sees a simple progress bar. It means as much as “Everything is fine. The content you want to see will load in a few seconds”.

Circular Progress Color Variations

Default Progress example.

import React from "react";
import { CDBCircularProgress, CDBContainer } from "cdbreact";
export const Progress = () => {
  return (
    <CDBContainer>
            <CDBCircularProgress
              value={25}
              max={100}
              min={0}
              text={`${25}%`}
            />
            <CDBCircularProgress
              value={50}
              max={100}
              min={0}
              text={`${50}%`}
              color="primary"
            />
            <CDBCircularProgress
              value={95}
              max={100}
              min={0}
              color="secondary"
              text={`${95}%`}
            />
            <CDBCircularProgress
              value={35}
              max={100}
              min={0}
              color="danger"
              text={`${35}%`}
            />
            <CDBCircularProgress
              value={47}
              max={100}
              min={0}
              color="info"
              text={`${47}%`}
            />
            <CDBCircularProgress
              value={100}
              max={100}
              min={0}
              color="success"
              text={`${100}%`}
            />
    </CDBContainer>
  );
};

Circular Progress Size Variations

import React from "react";
import { CDBCircularProgress, CDBContainer } from "cdbreact";
export const Progress = () => {
  return (
    <CDBContainer>
            <CDBCircularProgress
              value={25}
              max={100}
              min={0}
              text={`${25}%`}
              size="lg"
            />
            <CDBCircularProgress
              value={50}
              max={100}
              min={0}
              text={`${50}%`}
              size="sm"
            />
            <CDBCircularProgress
              value={95}
              max={100}
              min={0}
              text={`${95}%`}
              size="md"
            />
    </CDBContainer>
  );
};

React Progress Default

import React from "react";
import { CDBProgress, CDBContainer } from "cdbreact";
export const Progress = () => {
  return (
    <CDBContainer>
              <CDBProgress value={69} text={`${69}%`}/>
    </CDBContainer>
  );
};

React Progress Color Variants

import React from "react";
import { CDBProgress, CDBContainer } from "cdbreact";
export const Progress = () => {
  return (
    <CDBContainer>
              <CDBProgress
                value={10}
                text={`${10}%`}
                colors="primary"
              />
              <CDBProgress
                value={20}
                text={`${20}%`}
                colors="secondary"
              />
              <CDBProgress
                value={70}
                text={`${70}%`}
                colors="success"
              />
              <CDBProgress
                value={40}
                text={`${40}%`}
                colors="danger"
              />
              <CDBProgress
                value={90}
                text={`${90}%`}
                colors="info"
              />
              <CDBProgress
                value={60}
                text={`${60}%`}
                colors="warning"
              />
    </CDBContainer>
  );
};

Fixed Height

import React from "react";
import { CDBProgress, CDBContainer } from "cdbreact";
export const Progress = () => {
  return (
    <CDBContainer>
              <CDBProgress
                value={45}
                colors="dark"
                height={30}
                text={`${45}%`}
              />
              <CDBProgress
                value={60}
                colors="success"
                height={20}
                text={`${60}%`}
              />
              <CDBProgress
                value={80}
                colors="danger"
                height={40}
                text={`${80}%`}
              />
    </CDBContainer>
  );
};

API

In this section you will find advanced information about the Progress component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Progress Import Statement

You need to import the Contrast Progress component first before using it.

import { CDBProgress, CDBCircularProgress} from "cdbreact";

API Reference: Contrast Progress Properties

The table below shows the configuration options of the CDBProgress component.