@licuido-ui/ui_circle-progress NPM

CircleProgress

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

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_circle-progress

Import component

import { CircleProgress } from '@licuido-ui/ui_circle-progress';

Usage

<CircleProgress value={20} thumbColor={'green'} thumbSecondaryColor={'lightgreen'} size={10} />

Image

alt text

Sample Code

<CircleProgress
  value={20}
  size={100}
  labelStyle={{ backgroundColor: '' }}
  symbols={'%'}
  thickness={5}
  labelColor={'#f00'}
  labelSize={16}
  thumbColor={'#ff0'}
  thumbSecondaryColor={'#ff0f'}
  labelBackgroundStyle={{}}
/>

Props

Name	Description	Default	Control
circleId	string	string	string
value	number	20	20
labelStyle	object	{ }	labelStyle : {}
symbols	char "%","$"	"%"	"%"
thickness	number	4	4
size	number	50	50
labelSize	number	10	10
thumbColor	string	"blue"	linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
thumbSecondaryColor	string	"lightblue"	linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
labelBackgroundStyle	object	{ }	labelBackgroundStyle : {}
className	string	circle-progress	Set string
sx	SxProps<Theme>	{}	Set object
labelColor	string	"green"	linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

0.0.2

8 months ago