npm package: @licuido-ui/ui_linear-progress
Description: LinearProgress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.
Latest version: 0.0.2

# LinearProgress

LinearProgress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.

### Author

- @author Henry Dyson J <henry@crayond.co>

## Link

[Story Book Link LinearProgress](http://216.48.182.148:3333/?path=/docs/components-linearprogress--docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_linear-progress
```

## Import component

```jsx
import { LinearProgress } from '@licuido-ui/ui_linear-progress';
```

## Usage

```jsx
<LinearProgress value={20} thumbPrimaryColor='#7377f5' thumbSecondaryColor={'#b2b1fa'} />
```

## Image

![alt text](./linearProgress.png)

## Sample Code

```jsx
<LinearProgress
  value={20}
  variant={'indeterminate'}
  thumbHeight={10}
  className={'linear_progress'}
  valueBuffer={3}
  progressLabel={true}
  linearBarStyle={{ backgroundColor: '#fdd' }}
  symbols={'%'}
  symbolsColor={'#f00'}
  isShowToolTip={false}
  TooltipTextColor={'#ff0'}
  TooltipBgColor={'#fd0d'}
  TooltipArrowColor={'fd0d'}
  thumbPrimaryColor={'#7377f5'}
  thumbSecondaryColor={'#b2b1fa'}
/>
```

## Props

|        **Name**         |                     **Description**                     |   **Default**   |                        **Control**                        |
| :---------------------: | :-----------------------------------------------------: | :-------------: | :-------------------------------------------------------: |
|       **value\***       |                         number                          |       20        |                            20                             |
|         **id**          |                         string                          |     string      |                          string                           |
|       **variant**       | "buffer" \| "determinate" \| "indeterminate" \| "query" | "indeterminate" | buffer `or`  determinate `or`  indeterminate `or`  equery |
|     **valueBuffer**     |                         number                          |       15        |                            15                             |
|    **progressLabel**    |                         boolean                         |     "label"     |                      False `or` True                      |
|   **linearBarStyle**    |                         SxProps                         |       {}        |                   linearBarStyle : \{\}                   |
|       **symbols**       |                         string                          |       "%"       |                            '%'                            |
|     **thumbHeight**     |                         number                          |       30        |                            30                             |
|    **isShowToolTip**    |                         boolean                         |      false      |                      False `or` True                      |
|  **TooltipTextColor**   |                         string                          |     "#Fd2d"     |     linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))     |
|   **TooltipBgColor**    |                         string                          |     "#fdfd"     |     linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))     |
|  **TooltipArrowColor**  |                         string                          |    "#d2d22d     |     linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))     |
|    **symbolsColor**     |                         string                          |     #f4f44d     |     linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))     |
|  **thumbPrimaryColor**  |                         string                          |     #f4f44d     |     linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))     |
| **thumbSecondaryColor** |                         string                          |     #f4f44d     |     linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))     |
|      **className**      |                         string                          |     #f4f44d     |                        Set string                         |
|         **sx**          |                         SxProps                         |       {}        |                        Set object                         |