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 [email protected]

Link

Story Book Link LinearProgress

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_linear-progress

Import component

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

Usage

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

Image

Sample Code

<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 |