ProgressBar

The ProgressBar component displays the loading processes in your ReactJS app. It's supported by all newer browsers.

The component by default looks like this:

You can also customize it to look even better:

It can be achieved with the following code:

import React from 'react'
import { render } from 'react-dom'
import { RSGProgressBar } from 'rsg-components'

render(
  <RSGProgressBar id='string' progressCount={number}>
    Children
  </RSGProgressBar>,
  document.getElementById("root")
);

In version 3.0.0-beta.1 and later RSG is removed from the components so you have to use only ProgressBar instead of RSGProgressBar

RSGProgrssBar uses styles for the anim-mode from external less files, that's why "id" is required. In that mode the component must have not children, instead you can set display text in the anim-mode function.

"anim-mode"

To make RSGProgressBar animation you have to use external "anim" function. It can be loaded in the body section of your web app.

<script src='node_modules/rsg-components/less/progress_anim.js'></script>
<script type="text/javascript">
  // example for simple RSGProgressBar animation
  anim("Please wait ...", "ready", 100, 500, "#ProgressBarId");
</script>

Syntax:

anim(txt1, txt2, progressCount, speed, selector)

• txt1 is the text before the progress status (count);

• txt2 is the text after the progress status (count);

• progressCount is the progress status (count);

• speed is the speed (in milliseconds) of 1 percent of the process loading time

• selector: the id of your ProgressBar component (including the "#" symbol) - "#your_ProgressBar_id"

Custom props

Prop	Type	Description
progressCount	number	How many percent of the displayed process already completed
anim	boolean	Is the progress bar animated
checkered	string/boolean	Is the bar checkered or animated

What's next?

Check out this basic HTML/CSS alternative of RSGProgressBar - https://jsfiddle.net/8ajbyLtk/1/ to understand better how this component works.

The RSGProgressBar will be renewed soon, so it'll be easier to make animations. You can help by contributing or joining us in Slack: http://rsg-slack.herokuapp.com/