Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Basic Progress

Use variant prop for different colors of Progress bar.

import React from 'react';
import { ProgressBar } from 'react-bootstrap';

const BasicExample = () => {

  return (
    <>
        <ProgressBar variant="primary" now={25} className="mb-5" />
        <ProgressBar variant="success" now={50} className="mb-5" />
        <ProgressBar variant="warning" now={75} />
    </>
  );
};

export default BasicExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Animated Progress

Use <NubraProgress> for animated progressbar.

Preview

Jsx

import React from 'react';
import NubraProgress from '../../../components/@nubra-progressbar/@nubra-progressbar';

const AnimatedProgress = () => {

  return (
    <>
        <NubraProgress variant="primary" now={25} className="mb-5" />
        <NubraProgress variant="success" now={50} className="mb-5" />
        <NubraProgress variant="warning" now={75} className="mb-5" />
    </>
  );
};

export default AnimatedProgress;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Rounded Progress

Use rounded prop in <NubraProgress for rounded progressbar.

Preview

Jsx

import React from 'react';
import NubraProgress from '../../../components/@nubra-progressbar/@nubra-progressbar';

const RoundeProgress = () => {

  return (
    <>
        <NubraProgress variant="primary" now={25} className="mb-5" rounded />
        <NubraProgress variant="success" now={50} className="mb-5" rounded />
        <NubraProgress variant="warning" now={75} className="mb-5" rounded />
    </>
  );
};

export default RoundeProgress;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Striped Progress

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

Preview

Jsx

import React from 'react';
import { ProgressBar } from 'react-bootstrap';

const RoundeProgress = () => {

  return (
    <>
        <ProgressBar striped variant="primary" now={25} className="mb-5" />
        <ProgressBar striped variant="success" now={30} className="mb-5" />
        <ProgressBar striped variant="info" now={50} className="mb-5" />
        <ProgressBar striped variant="warning" now={75} animated className="mb-5" />
        <ProgressBar striped variant="danger" now={100} animated />
    </>
  );
};

export default RoundeProgress;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Progress sizes

Size whatever you want just add size ="xs", "sm", "md", "lg", "xl" prop in <NubraProgress> component or you can just add height utility classes.

Preview

Jsx

import React from 'react';
import NubraProgress from '../../../components/@nubra-progressbar/@nubra-progressbar';

const RoundeProgress = () => {

  return (
    <>
        <NubraProgress variant="primary" size="xs" now={25} className="mb-5" />
        <NubraProgress variant="primary" size="sm" now={50} className="mb-5" />
        <NubraProgress variant="primary" size="md" now={75} className="mb-5" />
        <NubraProgress variant="primary" size="lg" now={85} className="mb-5" />
        <NubraProgress variant="primary" size="xl" now={100} className="mb-5" />
    </>
  );
};

export default RoundeProgress;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Progress with labels

Add labels on top of your progress bars by placing text within the .progress-label inside .progress-lb-wrap and for label left add class .lb-side-left with .progress-wrap .

Preview

Jsx

organic

Referral

email

paid search

Labels on left

organic

Referral

email

paid search

Labels inside

25%

50%

loading

photoshop

import React from 'react';
import { Col, Row } from 'react-bootstrap';
import NubraProgress from '../../../components/@nubra-progressbar/@nubra-progressbar';

const ProgressWithLabel = () => {

  return (
    <Row>
        <Col>
            <NubraProgress.Wrapper className="mb-3">
                <NubraProgress.Label>organic</NubraProgress.Label>
                <NubraProgress size="xs" variant="primary" now={25} />
            </NubraProgress.Wrapper>
            <NubraProgress.Wrapper className="mb-3">
                <NubraProgress.Label>Referral</NubraProgress.Label>
                <NubraProgress size="xs" variant="success" now={50} />
            </NubraProgress.Wrapper>
            <NubraProgress.Wrapper className="mb-3">
                <NubraProgress.Label>email</NubraProgress.Label>
                <NubraProgress size="xs" variant="info" now={50} />
            </NubraProgress.Wrapper>
            <NubraProgress.Wrapper>
                <NubraProgress.Label>paid search</NubraProgress.Label>
                <NubraProgress size="xs" variant="warning" now={75} />
            </NubraProgress.Wrapper>
            <div className="title-sm mt-5">Labels on left</div>
            <Row>
                <Col md={6}>
                    <div className="progress-wrap lb-side-left">
                        <NubraProgress.Wrapper className="mb-5">
                            <NubraProgress.Label className="mnw-100p" >organic</NubraProgress.Label>
                            <NubraProgress size="xs" variant="primary" now={25} />
                        </NubraProgress.Wrapper>
                        <NubraProgress.Wrapper className="mb-5">
                            <NubraProgress.Label className="mnw-100p" >Referral</NubraProgress.Label>
                            <NubraProgress size="xs" variant="success" now={40} />
                        </NubraProgress.Wrapper>
                    </div>
                </Col>
                <Col md={6}>
                    <div className="progress-wrap lb-side-left">
                        <NubraProgress.Wrapper className="mb-5">
                            <NubraProgress.Label className="mnw-100p">email</NubraProgress.Label>
                            <NubraProgress size="xs" variant="info" now={50} />
                        </NubraProgress.Wrapper>
                        <NubraProgress.Wrapper className="mb-5">
                            <NubraProgress.Label className="mnw-100p">paid search</NubraProgress.Label>
                            <NubraProgress size="xs" variant="warning" now={75} />
                        </NubraProgress.Wrapper>
                    </div>
                </Col>
            </Row>
            <div className="title-sm">Labels inside</div>
            <Row>
                <Col md={6}>
                    <div className="progress-wrap">
                        <NubraProgress.Wrapper className="mb-5">
                            <NubraProgress variant="primary" now={25} label="25%" />
                        </NubraProgress.Wrapper>
                        <NubraProgress.Wrapper className="mb-5">
                            <NubraProgress variant="primary" now={50} label="50%" />
                        </NubraProgress.Wrapper>
                    </div>
                </Col>
                <Col md={6}>
                    <div className="progress-wrap">
                        <NubraProgress.Wrapper className="mb-5">
                            <NubraProgress variant="success" now={50} label="loading" />
                        </NubraProgress.Wrapper>
                        <NubraProgress.Wrapper>
                            <NubraProgress variant="danger" now={75} label="photoshop" />
                        </NubraProgress.Wrapper>
                    </div>
                </Col>
            </Row>
        </Col>
    </Row>
  );
};

export default ProgressWithLabel;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Multiple Bars

Include multiple progress bars in a progress component if you need.

Preview

Jsx

import React from 'react';
import { ProgressBar } from 'react-bootstrap';

const MultipleProgress = () => {

  return (
    <ProgressBar>
        <ProgressBar variant="primary" now={25} key={1} />
        <ProgressBar variant="success" now={30} key={2} />
        <ProgressBar variant="danger" now={40} key={3} />
    </ProgressBar>
  );
};

export default MultipleProgress;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.