Getting Started
Components

Progress

Description

Visually represents the completion status of a task or process.

FREE
This component is available for free. It implements the Bootstrap Progress component. See the installation instructions below for more details.

Arguments

Name Default Type Description
value 0 String The value of the progress bar.
min 0 String The min value for calculating the progress bar's progress.
max 0 String The max value for calculating the progress bar's progress.
color primary String The color style if the progress bar.
label String Define the label of the progress bar.
aria_label String Define the aria label of the progress bar.
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Default 

<%= render Railsboot::ProgressComponent.new(value: 75) %>

<div class="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-primary" style="width: 75%"></div>
</div>

With max value 

<%= render Railsboot::ProgressComponent.new(value: 100) %>

<div class="progress" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-primary" style="width: 100%"></div>
</div>

With small value 

<%= render Railsboot::ProgressComponent.new(value: 1) %>

<div class="progress" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-primary" style="width: 1%"></div>
</div>

With no value 

<%= render Railsboot::ProgressComponent.new %>

<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-primary" style="width: 0%"></div>
</div>

With label 

<%= render Railsboot::ProgressComponent.new(value: 33, label: "33 %") %>

<div class="progress" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-primary" style="width: 33%">33 %</div>
</div>

With aria label 

<%= render Railsboot::ProgressComponent.new(value: 33, label: "33 %", aria_label: "Example progress bar") %>

<div class="progress" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" aria-label="Example progress bar">
  <div class="progress-bar bg-primary" style="width: 33%">33 %</div>
</div>

With backgrounds 

<%= render Railsboot::ProgressComponent.new(value: 10, color: "primary", class: "mb-2") %>
<%= render Railsboot::ProgressComponent.new(value: 20, color: "secondary", class: "mb-2") %>
<%= render Railsboot::ProgressComponent.new(value: 30, color: "success", class: "mb-2") %>
<%= render Railsboot::ProgressComponent.new(value: 40, color: "danger", class: "mb-2") %>
<%= render Railsboot::ProgressComponent.new(value: 50, color: "warning", class: "mb-2") %>
<%= render Railsboot::ProgressComponent.new(value: 60, color: "info", class: "mb-2") %>
<%= render Railsboot::ProgressComponent.new(value: 70, color: "light", class: "mb-2") %>
<%= render Railsboot::ProgressComponent.new(value: 80, color: "dark", class: "mb-2") %>

<div class="progress mb-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-primary" style="width: 10%"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-secondary" style="width: 20%"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 30%"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 40%"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning" style="width: 50%"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info" style="width: 60%"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-light" style="width: 70%"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-dark" style="width: 80%"></div>
</div>

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

  • A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
  • A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
  • The desired component itself (app/components/railsboot/progress_component.rb).
  • A view template (app/components/railsboot/progress_component.html.erb) for the component unless it's rendered inline.
  • Any other dependent components such as Slots (just if the component needs those)
  • Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
  • A test file for the components (test/components/railsboot/progress_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Pricing Panel Progress Circular