Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
<div class="">
<div class="flex justify-between items-center mb-1">
<span class="text-sm font-medium text-grayscale-700">Processing...</span>
<span class="text-sm font-medium text-grayscale-700">45%</span>
</div>
<div class="bg-grayscale-200 rounded-full overflow-hidden h-3" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
<div class="rounded-full transition-all duration-300 ease-out h-full bg-info-500 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse" style="width: 45.0%"></div>
</div>
</div>
1
2
3
4
5
6
7
8
render BetterUi::ProgressComponent.new(
value: 45,
variant: :info,
size: :md,
label: "Processing...",
show_value: true,
animated: true
)