The ultimateline progress barUI for React

$ yarn add @frogress/line

Progress

import { LineProgressBar } from '@frogress/line'
<LineProgressBar percent={25} />
<LineProgressBar percent={65} />
<LineProgressBar percent={80} />

Color

<LineProgressBar
percent={25}
progressColor="#135ffb"
/>
<LineProgressBar
percent={65}
progressColor="linear-gradient(to right, #ff655b 60%, #fd297b)"
containerColor="#f0d4da"
/>

Rendering Gradients

❌ Wrong

Common Implementation

🔼 The gradient shrinks to the progress bar width, making it look weird when they're small.

✅ Correct

Frogress's Implementation

🔼 Gradient positions are preserved - regardless of the current progress state.

<LineProgressBar
percent={65}
progressColor="linear-gradient(to right, #78abe9, #74dad8, #ec7cac)"
/>

Rounding

<LineProgressBar
percent={value}
rounded={36}
height={36}
/>

Rendering Rounded Borders

❌ Wrong

Common Implementation

🔼 When the width of the process is less than the radius value, then the radius is decreased from the value that should be applied evenly.

✅ Correct

Frogress's Implementation

🔼 The provided radius is unified all the time.

Stripes

<LineProgressBar
stripe
percent={25}
/>

Sizing

<LineProgressBar percent={25} width={150} />
<LineProgressBar percent={25} width={200} />
<LineProgressBar
percent={25}
width={400}
height={24}
/>

Direction

Only the default gradient's direction is changed. Custom properties have no effect.

<LineProgressBar
percent={65}
direction="left"
/>
<LineProgressBar
percent={65}
direction="right"
/>

Label

45%
<LineProgressBar
label={(value: number) => <CustomLabelComponent percent={value} />}
percent={45}
rounded={36}
height={36}
/>

Animation

  • linear (default)
  • easeIn
  • easeOut
  • easeInOut
  • circIn
  • circOut
  • circInOut
  • backIn
  • backOut
  • backInOut
  • anticipate
import { AnimatedLineProgressBar } from '@frogress/line'
<AnimatedLineProgressBar
percent={48}
transition={{ easing: 'linear' }}
/>