Hakumi :: Rails ViewComponents

Progress bar

A standard progress bar.

30%

Code

<%= render Hakumi::Progress::Component.new(percent: 30) %>

Circular progress bar

A circular progress bar.

75%

Code

<%= render Hakumi::Progress::Component.new(percent: 75, type: :circle) %>

Mini size progress bar

A mini size progress bar for narrow areas.

40%

Code

<%= render Hakumi::Progress::Component.new(percent: 40, size: :small) %>

Responsive circular progress bar

When width is smaller than 20, show progress info via Tooltip.

Code

<%= render Hakumi::Progress::Component.new(percent: 75, type: :circle, size: 16, info_tooltip: :auto) %>

Mini size circular progress bar

A smaller circular progress bar.

Code

<%= render Hakumi::Progress::Component.new(percent: 60, type: :circle, size: 32, show_info: false) %>

Custom format

Set a custom text via the format slot.

7/10

Code

<%= render Hakumi::Progress::Component.new(percent: 70) do %>
  7/10
<% end %>

Dynamic

Programmatically controlled progress with public API.

50%

Code

<%= render Hakumi::Space::Component.new do |space| %>
  <% space.with_item do %>
    <%= render(Hakumi::Button::Component.new(id: "progress-minus")) { "-" } %>
  <% end %>
  <% space.with_item do %>
    <%= render(Hakumi::Button::Component.new(id: "progress-plus", type: :primary)) { "+" } %>
  <% end %>
<% end %>

<%= render Hakumi::Progress::Component.new(id: "dynamic-progress", percent: 50) %>

<script>
  (() => {
    const progress = document.getElementById("dynamic-progress")
    if (!progress) return

    const wire = (api) => {
      document.getElementById("progress-minus")?.addEventListener("click", () => api.decrease())
      document.getElementById("progress-plus")?.addEventListener("click", () => api.increase())
    }

    const ready = () => {
      const api = progress.hakumiComponent?.api
      if (!api) return false
      wire(api)
      return true
    }

    if (ready()) return

    const onRegister = ({ detail }) => {
      if (detail.id !== progress.id) return
      if (ready()) window.removeEventListener("hakumi-component:registered", onRegister)
    }

    window.addEventListener("hakumi-component:registered", onRegister)
  })()
</script>

Progress bar with success segment

Show several parts of progress with different status.

70%

Code

<%= render Hakumi::Progress::Component.new(percent: 70, success_percent: 30) %>

Dashboard

Dashboard-style circular progress.

60%

Code

<%= render Hakumi::Progress::Component.new(percent: 60, type: :dashboard) %>

Progress bar with steps

A progress bar with steps.

60%

Code

<%= render Hakumi::Progress::Component.new(percent: 60, steps: 5) %>

Progress size

Different progress sizes for line and circle.

30%

Code

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Progress::Component.new(percent: 30) %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Progress::Component.new(percent: 30, size: :small) %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Progress::Component.new(percent: 30, type: :circle, size: 60) %>
  <% end %>
<% end %>

Circular progress bar with steps

Circular steps with color segments and a 2px default gap.

50%

Code

<%= render Hakumi::Progress::Component.new(
  percent: 50,
  type: :circle,
  steps: 6,
  stroke_color: "#52c41a",
  trail_color: "#f0f0f0",
  size: 100
) %>

Progress API

Prop	Type	Default	Description
`percent`	`Number`	`0`	Progress percentage, clamped to 0..100.
`success_percent`	`Number`	`nil`	Optional success segment percentage (0..100).
`type`	`Symbol`	`:line`	Progress type: :line, :circle, :dashboard.
`status`	`Symbol`	`nil`	Status: :normal, :success, :exception, :active. Auto success when percent reaches 100.
`show_info`	`Boolean`	`true`	Show the info text.
`size`	`Symbol or Number`	`nil`	Line size (:small) or numeric circle size (px).
`stroke_width`	`Number`	`nil`	Stroke width in px.
`stroke_color`	`String or Hash`	`nil`	Stroke color. String for solid color (e.g., '#1677ff'). Hash for gradient with percentage keys (e.g., { '0%' => '#108ee9', '100%' => '#87d068' }).
`trail_color`	`String`	`nil`	Custom trail color.
`stroke_linecap`	`Symbol`	`:round`	Linecap style: :round, :square, :butt.
`steps`	`Integer`	`nil`	Enable steps mode for line or circle.
`gap_degree`	`Number`	`nil`	Gap degree for circle/dashboard.
`gap_position`	`Symbol`	`nil`	Gap position: :top, :bottom, :left, :right.
`format`	`String or Proc`	`nil`	Custom text format (or provide block content).
`content`	`Slot`	`-`	Block content used as info text when provided.
`**html_options`	`Keyword args`	`-`	Additional HTML attributes for the wrapper.

JavaScript API (element.hakumiComponent.api)

Prop	Type	Default	Description
`getPercent()`	`Function`	`-`	Get current percent.
`setPercent(value)`	`Function`	`-`	Set progress percent.
`adjustPercent(delta)`	`Function`	`-`	Increment or decrement percent by the provided delta (positive or negative).
`increase()`	`Function`	`-`	Increase progress using the default step (10% or one step when steps are enabled).
`decrease()`	`Function`	`-`	Decrease progress using the default step (10% or one step when steps are enabled).
`getStatus()`	`Function`	`-`	Get current status.
`setStatus(status)`	`Function`	`-`	Set status class.