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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<div class="flex flex-col justify-start w-[400px] lg:w-[500px]">
  <span class="flex my-4 font-semibold text-gray-400">Default progress bar</span>
  <div class="mb-8 space-y-2">
    <p class="text-sm text-gray-600 dark:text-gray-200 font-semibold">
      Gray 
    </p>
  </div>
  <span class="flex my-4 font-semibold text-gray-400">With outside Label</span>
  <div class="mb-8 space-y-2">
  </div>
  <span class="flex my-4 font-semibold text-gray-400">Different Colours</span>
  <div class="flex flex-col gap-4 mb-8">
    <p class="text-sm text-gray-600 dark:text-gray-200 font-semibold">
      Gray
    </p>
    <p class="text-sm text-indigo-600 dark:text-indigo-200 font-semibold">
      Indigo 
    </p>
    <p class="text-sm text-purple-600 dark:text-purple-200 font-semibold">
      Purple 
    </p>
    <p class="text-sm text-blue-600 dark:text-blue-200 font-semibold">
      Blue 
    </p>
    <p class="text-sm text-emerald-600 dark:text-emerald-200 font-semibold">
      Green 
    </p>
    <p class="text-sm text-yellow-600 dark:text-yellow-200 font-semibold">
      Yellow 
    </p>
    <p class="text-sm text-orange-600 dark:text-orange-200 font-semibold">
      Orange 
    </p>
    <p class="text-sm font-semibold">
      Red
    </p>
  </div>
  <span class="flex my-4 font-semibold text-gray-400">Different Colours With label inside</span>
  <div class="flex flex-col gap-4 mb-8">
    <p class="text-sm text-gray-600 dark:text-gray-200 font-semibold">
      Gray 
    </p>
    <p class="text-sm text-indigo-600 dark:text-indigo-200 font-semibold">
      Indigo 
    </p>
    <p class="text-sm text-purple-600 dark:text-purple-200 font-semibold">
      Purple 
    </p>
    <p class="text-sm text-blue-600 dark:text-blue-200 font-semibold">
      Blue 
    </p>
    <p class="text-sm text-emerald-600 dark:text-emerald-200 font-semibold">
      Green 
    </p>
    <p class="text-sm text-yellow-600 dark:text-yellow-200 font-semibold">
      Yellow 
    </p>
    <p class="text-sm text-orange-600 dark:text-orange-200 font-semibold">
      Orange 
    </p>
    <p class="text-sm font-semibold">
      Red
    </p>
  </div>
  <span class="flex my-4 font-semibold text-gray-400">Different sizes</span>
  <div class="flex flex-col gap-4 mb-8">
  </div>
</div>
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<div class="flex flex-col justify-start w-[400px] lg:w-[500px]">
  <span class="flex my-4 font-semibold text-gray-400">Default progress bar</span>
  <div class="mb-8 space-y-2">
    <%= rui_text(tag: :body, size: :bodySm, color: :gray, weight: :semibold){ "Gray " } %>
    <%= rui_progressbar( progress: 30) %>
  </div>
  <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>
  <span class="flex my-4 font-semibold text-gray-400">Different Colours</span>
  <div class="flex flex-col gap-4 mb-8">
    <%= rui_text(tag: :body, size: :bodySm, color: :gray, weight: :semibold){ "Gray" } %>
    <%= rui_progressbar(style: :gray, progress: 30) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :indigo, weight: :semibold){ "Indigo " } %>
    <%= rui_progressbar(style: :indigo, progress: 60) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :purple, weight: :semibold){ "Purple " } %>
    <%= rui_progressbar(style: :purple, progress: 90) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :blue, weight: :semibold){ "Blue " } %>
    <%= rui_progressbar(style: :blue, progress: 30) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :green, weight: :semibold){ "Green " } %>
    <%= rui_progressbar(style: :green, progress: 40) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :yellow, weight: :semibold){ "Yellow " } %>
    <%= rui_progressbar(style: :yellow, progress: 25) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :orange, weight: :semibold){ "Orange " } %>
    <%= rui_progressbar(style: :orange, progress: 80) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :red, weight: :semibold){ "Red" } %>
    <%= rui_progressbar(style: :red, progress: 10) %>
  </div>
  <span class="flex my-4 font-semibold text-gray-400">Different Colours With label inside</span>
  <div class="flex flex-col gap-4 mb-8">
    <%= rui_text(tag: :body, size: :bodySm, color: :gray, weight: :semibold){ "Gray " } %>
    <%= rui_progressbar(style: :gray, progress: 50) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :indigo, weight: :semibold){ "Indigo " } %>
    <%= rui_progressbar(style: :indigo, progress: 60) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :purple, weight: :semibold){ "Purple " } %>
    <%= rui_progressbar(style: :purple, progress: 90) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :blue, weight: :semibold){ "Blue " } %>
    <%= rui_progressbar(style: :blue, progress: 30) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :green, weight: :semibold){ "Green " } %>
    <%= rui_progressbar(style: :green, progress: 40) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :yellow, weight: :semibold){ "Yellow " } %>
    <%= rui_progressbar(style: :yellow, progress: 25) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :orange, weight: :semibold){ "Orange " } %>
    <%= rui_progressbar(style: :orange, progress: 80) %>
    <%= rui_text(tag: :body, size: :bodySm, color: :red, weight: :semibold){ "Red" } %>
    <%= rui_progressbar(style: :red, progress: 10) %>
  </div>
  <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>

Progressbar Collection

Showing all progressbar examples with different style and size.

No params configured.