RapidRails UI Book
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="flex flex-col justify-start w-[400px] lg:w-[500px]">
  <span class="flex my-4 font-semibold text-gray-400">Different sizes</span>
  <div class="flex flex-col gap-4 mb-8">
    <div height="small" role="progressbar" aria-labelledby="ProgressLabel" aria-valuenow="25 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: 25.0%" class="p-0.6 rounded-full flex items-center justify-center rounded-full bg-gray-500 h-4">
        <div class="progress_value"> 25% </div>
      </div>
    </div>
    <div height="medium" 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-gray-500 h-4">
        <div class="progress_value"> 50% </div>
      </div>
    </div>
    <div height="large" role="progressbar" aria-labelledby="ProgressLabel" aria-valuenow="75 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: 75.0%" class="p-0.6 rounded-full flex items-center justify-center rounded-full bg-gray-500 h-4">
        <div class="progress_value"> 75% </div>
      </div>
    </div>
    <div height="xlarge" striped="true" role="progressbar" aria-labelledby="ProgressLabel" aria-valuenow="90 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: 90.0%" class="p-0.6 rounded-full flex items-center justify-center rounded-full bg-rose-500 h-4">
        <div class="progress_value"> 90% </div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
<div class="flex flex-col justify-start w-[400px] lg:w-[500px]">
  <span class="flex my-4 font-semibold text-gray-400">Different sizes</span>
  <div class="flex flex-col gap-4 mb-8">
    <%= rui_progressbar(height: :small, progress: 25) %>
    <%= rui_progressbar(height: :medium, progress: 50) %>
    <%= rui_progressbar(height: :large, progress: 75) %>
    <%= rui_progressbar(height: :xlarge, progress: 90, striped: true, style: :red) %>
  </div>
</div>

With Sizes

Showing all progressbar examples with different sizes.

No params configured.