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' }}
/>