🎨

Customization

Make it yours with endless possibilities

Loaded in 1646ms

🧭Direction Options

Choose from 8 different directions to match your design

top-to-right

Top bar, left to right

top-to-left

Top bar, right to left

bottom-to-right

Bottom bar, left to right

bottom-to-left

Bottom bar, right to left

left-to-bottom

Left bar, top to bottom

left-to-top

Left bar, bottom to top

right-to-bottom

Right bar, top to bottom

right-to-top

Right bar, bottom to top

🌈Color Customization

Use any valid CSS color value

Hex Colors

color="#ec4899"

RGB/RGBA

color="rgb(236, 72, 153)"

HSL

color="hsl(330, 81%, 60%)"

✨Advanced Styling

Use Tailwind CSS classes for advanced customization

Container Classes

Control the size and positioning of the progress bar container

containerClassName="h-2 shadow-lg"

Progress Classes

Apply Tailwind classes directly to the progress element

progressClassName="bg-linear-to-r from-purple-500 to-pink-500"

Combined Example

<NavigationProgress 
  direction="top-to-right"
  color=&quot;transparent"
  containerClassName="h-2"
  progressClassName="bg-linear-to-r from-orange-500 via-pink-500 to-purple-500 shadow-xl"
/>

🎮 Try It Live

Head to the control panel to test all customization options in real-time

Open Control Panel