@ramonak/react-progress-bar
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.2 • Public • Published

    @ramonak/react-progress-bar

    Progress Bar React Component

    NPM npm bundle sizeGitHubnpm


    demo


    Playground / Code Generator


    Install

    npm install --save @ramonak/react-progress-bar

    Usage

    import React from "react";
    
    import ProgressBar from "@ramonak/react-progress-bar";
    
    const Example = () => {
      return <ProgressBar completed={60} />;
    };

    Examples

    Label without "%" at the end

    example1

    <ProgressBar completed="60">

    Max completed value is greater than 100

    example1

    <ProgressBar completed={180} maxCompleted={200} />

    Custom Label

    example1

    <ProgressBar completed={60} customLabel="Not there yet" />

    Custom class names

    example1

    //styles.scss
    
    .wrapper {
      border: 3px solid blue;
    }
    
    .container {
      background-color: pink;
    }
    
    .barCompleted {
      background-color: lightblue;
      width: 80%;
    }
    
    .label {
      font-size: 20px;
      color: green;
    }
    import './styles.scss'
    
    ...
    
    <ProgressBar
      completed={80}
      className="wrapper"
      barContainerClassName="container"
      completedClassName="barCompleted"
      labelClassName="label"
    />

    Props

    Name Type Default Description
    completed (required) Number or string Percentage of completed progress bar value.
    If a string, the "%" won't be added to the label. See Examples
    maxCompleted number 100 Max possible value of the completed prop
    customLabel string undefined Custom label
    bgColor string #6a1b9a Color of the completed bar
    height string 20px Height of the bar
    width string 100% Width of the bar
    margin string Margin
    padding string Padding
    borderRadius string 50px Border radius of the bar
    baseBgColor string #e0e0de Color of the "non-completed" bar
    labelAlignment string:
    left, center, right, outside
    right Position of the label inside the completed bar or outside bar
    labelColor string #fff Color of the label text
    labelSize string 15px Font-size of the label text
    isLabelVisible boolean true Visibility of the label
    transitionDuration string 1s Duration of the width transition
    transitionTimingFunction string:
    ease, linear, ease-in, ease-out, ease-in-out
    ease-in-out Timing function of the width transition
    animateOnRender boolean false Should the bar width be animated on the first render
    initCompletedOnAnimation string or number 0 Initial completed value (e.g. the width of the completed bar) on animation start (applies only when animateOnRender is true)
    className string Add a className to the parent div (see example)
    barContainerClassName string Add a className to the container div (see example)
    completedClassName string Add a className to the completed part of the bar (see example)
    labelClassName string Add a className to the bar label (see example)
    dir string:
    ltr, rtl, auto
    ltr Progressbar HTML direction
    ariaValuemin number 0 accessibility: Defines the minimum allowed value for a range
    ariaValuemax number 100 accessibility: Defines the maximum allowed value for a range
    ariaValuetext number null accessibility: Defines the human readable text alternative of aria-valuenow (defaults to completed if not passed)
    customLabelStyles custom CSS properties for a label)

    License

    MIT © KaterinaLupacheva

    Install

    npm i @ramonak/react-progress-bar

    DownloadsWeekly Downloads

    10,010

    Version

    5.0.2

    License

    MIT

    Unpacked Size

    32.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • ramonak