@highlight-ui/circular-progress

Installation

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

Usage

import React, { useState } from 'react';
import { CircularProgress } from '@highlight-ui/circular-progress';

export default function CircularProgressExample() {
  return <CircularProgress percentage={50} />;
}

Props 📜

| Prop | Type | Required | Default | Description | | :----------- | :----------- | :------- | :------ | :------------------------------------------------ | | percentage | number | Yes | | Percentage of the progress | | color | ColorToken | No | | Custom color token for the progress circular line |

Custom types 🔠

| Type | Values | Description | | :----------- | :-------------------------------------------------------------------------------------- | :------------------------ | | ColorToken | "Colors" token names | Used for the color prop |

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.