@highlight-ui/circular-progress

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