Progress Bar

Progress indicator with milestone markers.

65% Animated

Level Progress65%

🥉

🥈

🥇

💎

Bronze

Silver

Gold

Platinum

XP Progress65 / 100

Features

• Milestones — Mark key progress points with icons
• Multiple sizes — sm, md, lg
• Variants — default, success, warning, danger
• Animated — Optional shimmer effect
• Labels — Show value or percentage

Usage

<script setup>
import { FkProgress } from '@fortune-kit/components'

const milestones = [
  { value: 25, label: 'Bronze', icon: '🥉' },
  { value: 50, label: 'Silver', icon: '🥈' },
  { value: 75, label: 'Gold', icon: '🥇' },
  { value: 100, label: 'Platinum', icon: '💎' }
]
</script>

<template>
  <FkProgress
    :value="65"
    :max="100"
    label="Level Progress"
    :milestones="milestones"
    show-percentage
    size="lg"
    animated
  />
</template>

Props

Prop	Type	Default	Description
value	number	Required	Current value
max	number	100	Maximum value
min	number	0	Minimum value
milestones	Milestone[]	[]	Milestone markers
showValue	boolean	false	Show current/max
showPercentage	boolean	false	Show percentage
label	string	—	Progress label
size	'sm' | 'md' | 'lg'	'md'	Bar height
variant	string	'default'	Color variant
animated	boolean	true	Enable shimmer

Milestone Type

interface Milestone {
  value: number
  label?: string
  icon?: string
}