- Accordion
- Alert
- Avatar PRO
- Avatar Group PRO
- Badge
- Blank Slate PRO
- Breadcrumb
- Breakpoint Debug PRO
- Button
- Button Group
- Callout PRO
- Card
- Carousel
- Close Button
- Container
- Copy to Clipboard PRO
- Divider PRO
- Dropdown
- Errors PRO
- Feed PRO
- Flash PRO
- Form Field PRO
- Header PRO
- Heading
- Heading with Anchor PRO
- List Group
- Modal
- Nav
- Navbar
- Offcanvas
- Pagination
- Pricing Panel PRO
- Progress
- Progress Circular PRO
- Rating Group PRO
- Ribbon PRO
- Spinner
- Stat PRO
- Stepper PRO
- Table
- Table of Contents PRO
- Team Member PRO
- Testimonial PRO
- Toast
Progress Circular
Description
Visualizes percentages, giving users an intuitive and visually appealing way to understand numerical data at a glance.
PRO
This component is part of our professional component suite. See the installation instructions below for more on how to use it.
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
<div class="row">
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 100) %>
</div>
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 75) %>
</div>
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 50) %>
</div>
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 25) %>
</div>
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 0) %>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="text-primary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="102.0, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="text-primary" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="76.5, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="text-primary" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="51.0, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="text-primary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="25.5, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="text-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="0.0, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
</div>With label
<div class="row">
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 33, label: "33 %") %>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="text-primary" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="33.66, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
<text font-size="8px" text-anchor="middle" dominant-baseline="middle" x="50%" y="50%" fill="currentColor">
33 %
</text>
</svg>
</div>
</div>
</div>With aria label
<div class="row">
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 33, label: "33 %", aria_label: "Example progress bar") %>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="text-primary" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" aria-label="Example progress bar">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="33.66, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
<text font-size="8px" text-anchor="middle" dominant-baseline="middle" x="50%" y="50%" fill="currentColor">
33 %
</text>
</svg>
</div>
</div>
</div>With backgrounds
<div class="row">
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 10, color: "primary", class: "mb-2") %>
</div>
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 20, color: "secondary", class: "mb-2") %>
</div>
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 30, color: "success", class: "mb-2") %>
</div>
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 40, color: "danger", class: "mb-2") %>
</div>
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 50, color: "warning", class: "mb-2") %>
</div>
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 60, color: "info", class: "mb-2") %>
</div>
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 70, color: "light", class: "mb-2") %>
</div>
<div class="col-sm-3 col-md-2">
<%= render Railsboot::ProgressCircularComponent.new(value: 80, color: "dark", class: "mb-2") %>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="text-primary mb-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="10.2, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="text-secondary mb-2" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="20.4, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="text-success mb-2" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="30.6, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="text-danger mb-2" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="40.8, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="text-warning mb-2" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="51.0, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="text-info mb-2" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="61.2, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="text-light mb-2" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="71.4, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="text-dark mb-2" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<svg viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle style="color: var(--bs-secondary-bg);" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-width="2"></circle>
<circle class="" cx="18" cy="18" fill="none" r="16.1" stroke="currentColor" stroke-dasharray="81.6, 100" stroke-linecap="butt" stroke-width="2" transform="rotate(-90 18 18)"></circle>
</svg>
</div>
</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_circular_component.rb). - A view template (
app/components/railsboot/progress_circular_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_circular_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.
Get access
You need to purchase a professional license to download this component.