RapidRails UI Book
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="flex flex-col justify-start w-[400px] lg:w-[500px]">
  <span class="flex my-4 font-semibold text-gray-400">With outside Label</span>
  <div class="mb-8 space-y-2">
    <div class="flex justify-between mb-1">
      <span class="text-sm text-gray-600 dark:text-gray-200 font-semibold">
        RRUI
      </span>
      <span class="text-sm text-gray-600 dark:text-gray-200 font-semibold">
        50%
      </span>
    </div>
    <div role="progressbar" aria-labelledby="ProgressLabel" aria-valuenow="50 bg-gray-200 dark:bg-gray-700 text-xs font-semibold text-white text-center leading-none text-gray-600 dark:text-gray-200 rounded-full w-full h-4" class="bg-gray-200 dark:bg-gray-700 text-xs font-semibold text-white text-center leading-none text-gray-600 dark:text-gray-200 rounded-full w-full h-4">
      <div style="width: 50.0%" class="p-0.6 rounded-full flex items-center justify-center rounded-full bg-blue-500 h-4 text-xs font-semibold text-white text-center leading-none">
        <div class="progress_value"> 50% </div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
<div class="flex flex-col justify-start w-[400px] lg:w-[500px]">
  <span class="flex my-4 font-semibold text-gray-400">With outside Label</span>
  <div class="mb-8 space-y-2">
    <%= rui_progressbar(style: :blue, progress: 50, label: true, header: "RRUI", text: "50%") %>
  </div>
</div>

Progressbar with outlside labels

Progressbar with outside labels on eachside for more information.

No params configured.