RPF Design System for Rails
x
1
<div class="rpf-progress-bar"><label class="rpf-progress-bar__label"><span>Step 1 of 5</span><progress class="rpf-progress-bar__bar" value="20" max="100">20%</progress></label></div>
1
render(DesignSystem::ProgressBarComponent.new(percent:, label:))

Progress Bar Component

Produces a progress bar component, which shows the progress of something based on the percent passed in.

Options

  • percent: A calculated percentage of the completed steps on the bar (step/total*100). (required)
  • label: The text label relaying the progress in words. (optional)

  • modifiers: Additional classes to add to the component (gets appended to the end of the base class name). (optional)

    example:

    DesignSystem::ProgressBarComponent.new(percent: 20, label 'Step 1 of 5', modifiers: 'large', id: 'progress-bar')

    produces:

    <div id="progress-bar" class="rpf-progress-bar rpf-progress-bar--large">
    <div class="rpf-progress-bar__step">Step 1 of 5</div>
    <div class="rpf-progress-bar__bar">
    <div style="width: 20%" class="rpf-progress-bar__progress"></div>
    </div>
    </div>

  • It also accepts all the usual HTML attributes for a div tag, e.g. id, class, data- etc.

Param Description Input

—

—