react-progress-bar-timer

Customizable React progress bar with a labeled timer

Demo • Examples • Tech Stack • Features • Installation • Usage • Styling

Demo

ProgressTimer Storybook Demo

• You can change the component's props via controls and see the rendered output.
• Go to the Docs tab to see example usage code snippets and documentation for props of ProgressTimer.

Examples

• Example Parcel App
  • Control timer via functions exposed by ref or started prop.
  • This can be served during development.
  • source code
• Halo Time
  • Halo Infinite spawn timer SPA that controls started state of timers via started prop or by clicking a progress bar.
  • source code

Tech Stack

• React
• Material-UI
• react-scripts
• Node.js
• Chromatic
• Vercel

Features

• Click to stop while running.
• Click to start when unstarted.
• Click to restart when finished.
• Control timer with start(), stop(), and restart() via a ref.
• Control timer with started prop.
• Progress bar can fill or empty to represent progress.
• Progress bar can move left or right.
• Configure duration in seconds.
• Flashing animation upon finishing.
• Slide and Shrink/Grow text animations
• When the timer is inactive, the label will be replaced with buttonText if provided.
• Always show timer even when inactive with showDuration set to true
• onFinish callback fired when timer finishes.
• Customized styling with props
  • color
  • fontColor
  • fontSize
  • rootRounded
  • barRounded
  • classes

See Usage and Styling for more info.

Installation

yarn add react-progress-bar-timer

npm install react-progress-bar-timer

Usage

import ProgressTimer from 'react-progress-bar-timer';

const ExampleComponent = () => (
  <ProgressTimer label="Something" duration={30} />
);

ProgressTimer Usage Docs

• Use the story controls to change prop values and click Show code to see a snippet

| Name | Type | Default | Description | |--------------|-----------------------|-------------|--------------------------------------------------------------------------------------------------------------| | barRounded | boolean | false | Whether the progress bar should be rounded. | | buttonText | string | | Text displayed when timer is inactive (overrides label). | | classes | object | | Styles applied to the component (override or append to existing styles). ⓘ CSS Classes | | color | string | "#1976d2" | Color of the bar; background is same with lower opacity. | | direction | "left" | "right" | "right" | Direction the bar grows toward. | | duration | number | 60 | Duration of the timer in seconds. | | fontColor | string |"#ffffffd9"| Color of the label and timer. | | fontSize | string | number | | Font size of the label and timer. Progress bar scales with font size. | | label | string | | Label that describes the timer. | | onFinish | func | | Callback fired when the timer finishes. | | rootRounded | boolean | true | Whether the progress bar's root element should be rounded. | | showDuration | boolean | false | Whether the timer's duration should be shown when inactive. | | started | boolean | null | | Whether the timer should be started.true (start) | false (stop) | null/undefined (await input). | | variant | "fill" | "empty" | "fill" | Determines if the bar fills or empties. |

Styling

• The following classes can be used with the classes prop to customize the styling.

CSS Classes

| Name | Type | Description | |-------------------|----------|-----------------------------------------------| | root | string | Styles applied to the root element. | | progressContainer | string | Styles applied to the progress bar container. | | textContainer | string | Styles applied to the text container. | | progress | string | Styles applied to the progress bar. | | label | string | Styles applied to the label. | | time | string | Styles applied to the time. |

Development

Installing Dependencies

yarn install

npm install

Storybook

Storybook can be used to demo your code changes in real time with HMR.

Starting Storybook

yarn storybook

npm storybook

Example App

In addition to Storybook, you can use the example app in example/ to test changes.

Watch for changes to src/

yarn start

npm start

Serve Example App

cd example/
yarn install
yarn start

cd example/
npm install
npm start

The example app will now be served locally and use HMR to live update on changes to the source code or example app.