@ohaeseong/react-progress-bar

react simple progress bar

Usage no npm install needed!

<script type="module">
  import ohaeseongReactProgressBar from 'https://cdn.skypack.dev/@ohaeseong/react-progress-bar';
</script>

README

react progress bar

Install

  yarn add @ohaeseong/react-progress-bar

Usage

import React from 'react';
import { ProgressBar } from '@ohaeseong/react-progress-bar';

function App() {

  return <ProgressBar value={80} />;
}

Props

Name Type Default Description
value (required) number(0 - 100) . Percentage of completed progress bar value.
width string auto Width of the bar
height string 15px Height of the bar
margin string none Margin of the bar
bgColor string (color code) #E5E7E9 Color of the "non-completed" bar
progressColor string (color code) #706af3 Color of the completed bar
borderRadius string 3px Border radius of the bar
labelColor string (color code) #f9f9f9 Label color of the bar
labelSize string (1rem, 12px ...) 0.8rem Label size of the bar
isLabelVisible boolean (true === show label, false === hide label) false Visibility of the label
transitionDuration string (1s, 0.5s ...) 1s Duration of the width transition
transitionTimingFunction string (ease, ease-in, ease-in-out ...) ease-in-out Timing function of the width transition
labelAlignment string (top, bottom, null === center) null (center) Position of the label