Indicators Component Showcase

Introduction

The Indicators component is a versatile and reusable component designed to display different types of indicators. Below are examples of how to use the component with various configurations.

Usage Examples

Progress Bar

60%

1<div className="relative">
2    <Indicators   type="progress-bar" progressValue={60} />
3    <span className="absolute inset-0 -top-4 flex justify-center items-center text-white font-bold">
4    60%
5    </span>
6</div>

Circular Progress

75%

1<Indicators type="circular-progress" progressValue={75} size={120} strokeWidth={10} />

Step Indicator

Step 1

Step 2

Step 3

Step 4

1<Indicators
2  type="step-indicator"
3  steps={['Step 1', 'Step 2', 'Step 3', 'Step 4']}
4  currentStep={2}
5/>