@planning-center/react-progress-bar

Animated progress bar with text

Usage no npm install needed!

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

Animated progress bar with text

import ProgressBar from '@planning-center/react-progress-bar'

<ProgressBar progress={25} text="Loading" animated={true} />

npm install --save @planning-center/react-progress-bar

Configure Rails so it can find the stylesheet in your application.rb:

config.assets.paths << Rails.root.join('node_modules')

Then in your Sass:

@import "@planning-center/react-progress-bar/style"

Sass variables:

$react-progress-bar-color: #ccc !default
$react-progress-bar-bg-color: rgba(0, 0, 0, .05) !default