Using npm:
npm install @highlight-ui/circular-progress
Using yarn:
yarn add @highlight-ui/circular-progress
Using pnpm:
pnpm install @highlight-ui/circular-progress
In your (S)CSS file:
@import url('@highlight-ui/circular-progress');
Once the package is installed, you can import the library:
import { CircularProgress } from '@highlight-ui/circular-progress';
import React, { useState } from 'react';
import { CircularProgress } from '@highlight-ui/circular-progress';
export default function CircularProgressExample() {
return <CircularProgress percentage={50} />;
}
Prop | Type | Required | Default | Description |
---|---|---|---|---|
percentage |
number |
Yes | Percentage of the progress | |
color |
ColorToken |
No | Custom color token for the progress circular line |
Type | Values | Description |
---|---|---|
ColorToken |
"Colors" token names | Used for the color prop |
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.