x
1
2
3
4
5
6
7
8
9
10
11
12
13
<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 role="progressbar" aria-labelledby="ProgressLabel" aria-valuenow="30 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: 30.0%" class="p-0.6 rounded-full flex items-center justify-center rounded-full bg-gray-500 h-4"> <div class="progress_value"> 30% </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">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></div>Default progressbar
Default progressbar with % progress, default colour and size.
<%= rui_progressbar( progress: 30) %>No params configured.