@bolttech/atoms-progress-bar v0.16.2

Installation

To use the ProgressBar component in your React application, you need to follow these steps:

Using npm

npm install @bolttech/frontend-foundations @bolttech/atoms-progress-bar

Using Yarn

yarn add @bolttech/frontend-foundations @bolttech/atoms-progress-bar

Once you have the required dependencies installed, you can start using the ProgressBar component in your React application.

Usage

The ProgressBar component is used to display a visual progress bar along with a label and a percentage indicator. It can be customized by providing the label and percentage props.

To use the component, import it and include it in your JSX:

import React from 'react';
import {ProgressBar} from '@bolttech/atoms-progress-bar';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <ProgressBar label="Upload Progress" percentage={75}/>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The ProgressBar component accepts the following props:

Example

Here's an example of using the ProgressBar component:

<ProgressBar label="Loading" percentage={50} />

This will render a ProgressBar component with the label "Loading" and a progress bar filled to 50%.

Contributing

Contributions to the ProgressBar component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's GitHub repository.