Progress Bar

Loading... 30% 
<div class="lg-w-50pc mx-auto p-10 my-5 br-8 bg-blue-dark">
    <div class="flex justify-between fs-s3 mb-2 white opacity-70">
        <span>Loading...</span>
        <span>30%</span>
    </div>
    <div class="br-round w-100pc bg-white-30">
        <div class="br-round bg-white h-1" style="width:30%;"></div>
    </div>
</div>

Color

<div class="br-round w-100pc bg-gray-lighter my-5">
    <div class="br-round bg-blue h-2" style="width:30%;"></div>
</div>

<div class="br-round w-100pc bg-gray-lighter my-5">
    <div class="br-round bg-indigo h-2" style="width:30%;"></div>
</div>

<div class="br-round w-100pc bg-gray-lighter my-5">
    <div class="br-round bg-red h-2" style="width:30%;"></div>
</div>

<div class="br-round w-100pc bg-gray-lighter my-5">
    <div class="br-round bg-green h-2" style="width:30%;"></div>
</div>

<div class="br-round w-100pc bg-gray-lighter my-5">
    <div class="br-round bg-yellow h-2" style="width:30%;"></div>
</div>

Height

<div class="br-round w-100pc bg-gray-light my-5">
    <div class="br-round bg-red h-1px" style="width:40%;"></div>
</div>
<div class="br-round w-100pc bg-gray-light my-5">
    <div class="br-round bg-red h-1" style="width:40%;"></div>
</div>
<div class="br-round w-100pc bg-gray-light my-5">
    <div class="br-round bg-red h-2" style="width:40%;"></div>
</div>