Introduction

Loading Bar Component is a react component that creates a loading bar at the top of the page. The current progress are controlled by passing a props progress that goes from 0 to 100.

Installation

Installing it using yarn:

yarn add @redwallsolutions/loadingbar-component-module

Or using npm:

npm i @redwallsolutions/loadingbar-component-module

Props

Usage

The minimal setup to use this component is to call <Loading progress={number}> where progress is a number from 0 to 100. Look the next example, we passed a number state and then change state randomly when click on first button.

() => {
  const [progress, setProgress] = useState(0)
  return (
    <>
      <button onClick={() => setProgress(Math.random() * 100)}>
        Random Progress
      </button>
      <button onClick={() => setProgress(100)}>Finish Loading</button>
      <Loading progress={progress} />
    </>
  )
}

The second button changes the progress state to 100. It makes component to execute a finish animation and to trigger a onFinish function prop.

Customizing

You can customize the loadingbar component through appearance and theme properties.

Theme Prop

The theme is a property used by (theming-component-module)[https://github.com/redwallsolutions/theming-component-module]. It accepts an object with the following structure:

{
    mode: 'light' | 'dark',
    default?: 'any color string'
    primary?: 'any color string',
    secondary?: 'any color string',
    defaultContrast?: 'any color string',
    primaryContrast?: 'any color string',
    secondaryContrast?: 'any color string',
    defaultDark?: 'any color string',
    primaryDark?: 'any color string',
    secondaryDark?: 'any color string',
    defaultContrastDark?: 'any color string',
    primaryContrastDark?: 'any color string',
    secondaryContrastDark?: 'any color string'
}

The only theme object attribute that is required is mode, it can accept either light or dark value. The others attributes are optional and can receive a string color. It can be a hex, rgb, or any format you want.

Appearance prop

The appearance is a property used to apply the correspondent theme attribute to customize the component. For example, if you pass the following component props:

<Loading theme={{mode:'light', secondary: 'blue'}} appearance="secondary" .../>

Then the loadingbar will use secondary value passed to appearance prop and customize all colors related to theme attribute secondary value. As you assigned blue to secondary theme attribute, the loadingbar now is blue.

Check this out:

() => {
  const [progress, setProgress] = useState(0)
  async function onFinish(finished) {
    await finished
    setProgress(-1)
    setProgress(0)
  }
  return (
    <div>
      <button
        onClick={() => {
          setProgress(100)
        }}
      >
        Loadingbar is blue! :)
      </button>
      <Loading
        theme={{ mode: 'light', secondary: 'blue' }}
        appearance="secondary"
        progress={progress}
        onFinish={onFinish}
      />
    </div>
  )
}