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
<div class="flex flex-col justify-start w-[400px] lg:w-[500px]">
  <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>
</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
<div class="flex flex-col justify-start w-[400px] lg:w-[500px]">
  <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>
</div>

With Colours

Showing all progressbar examples with different colours.

No params configured.