visualizations

Progress Semicircle

A semi-circular shape that indicates progress, performance or status.

Installation

Install dependencies

bash
npm install tailwind-variants

Add component

Copy and paste the code into your project's component directory.

Pass stroke color

Use stroke to style the circle color.

vue
<ProgressSemicircle :value="progress" class="stroke-brand-primary" />
Edit this page on GitHub