The best-selling pants you'll wear on repeat —all under $100. Shop Now

The best-selling pants you'll wear on repeat —all under $100. Shop Now

The best-selling pants you'll wear on repeat —all under $100. Shop Now

Gearing up something amazing for you…

Still waiting? Magic takes a moment! ✨

Your cart

Limited Item, checkout within 10m 00s

Add note for seller
Estimate shipping rates
Select or input Coupon

UP TO 30% OFF

For orders over $9.90

  • 12/18/2023 14:00 ~ 12/25/2023 14:00
  • The minimum spend for this coupon $200.00

UP TO 30% OFF

For orders over $9.90

  • 12/18/2023 14:00 ~ 12/25/2023 14:00
  • The minimum spend for this coupon $200.00

If you have coupon code, please apply it below.

Background Variation (thick)

25%
35%
45%
55%
65%
75%
85%
100%
                                            
                                                <!-- Primary color progress bar -->
                                                <div class="progress mt--16" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                                                    <div class="progress-bar rbt-bg-color-primary" style="width: 25%">25%</div>
                                                </div>
                                                
                                                <!-- Secondary color progress bar -->
                                                <div class="progress mt--16" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                                                    <div class="progress-bar rbt-bg-color-secondary" style="width: 35%">35%</div>
                                                </div>
                                                
                                                <!-- Black color progress bar -->
                                                <div class="progress mt--16" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                                                    <div class="progress-bar rbt-bg-color-black" style="width: 45%">45%</div>
                                                </div>
                                                
                                                <!-- Brand color progress bar -->
                                                <div class="progress mt--16" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                                                    <div class="progress-bar rbt-bg-color-brand-700" style="width: 55%">55%</div>
                                                </div>
                                                
                                                <!-- Gray color progress bar -->
                                                <div class="progress mt--16" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                                                    <div class="progress-bar rbt-bg-color-gray-300" style="width: 65%">65%</div>
                                                </div>
                                                
                                                <!-- Success color progress bar -->
                                                <div class="progress mt--16" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                                                    <div class="progress-bar rbt-bg-color-success" style="width: 75%">75%</div>
                                                </div>
                                                
                                                <!-- Warning color progress bar -->
                                                <div class="progress mt--16" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                                                    <div class="progress-bar rbt-bg-color-warning" style="width: 85%">85%</div>
                                                </div>
                                                
                                                <!-- Danger color progress bar -->
                                                <div class="progress mt--16" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                                                    <div class="progress-bar rbt-bg-color-danger" style="width: 100%">100%</div>
                                                </div>
                                            
                                        

Background Variation (thin)

25%
35%
45%
55%
65%
75%
85%
100%
                                            
                                                <!-- Primary color progress bar -->
                                                <div class="mb-2">25%</div>
                                                <div class="progress mb-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
                                                    <div class="progress-bar rbt-bg-color-primary rounded-pill" style="width: 25%"></div>
                                                </div>
                                                
                                                <!-- Secondary color progress bar -->
                                                <div class="mb-2">35%</div>
                                                <div class="progress mb-3" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
                                                    <div class="progress-bar rbt-bg-color-secondary rounded-pill" style="width: 35%"></div>
                                                </div>
                                                
                                                <!-- Black color progress bar -->
                                                <div class="mb-2">45%</div>
                                                <div class="progress mb-3" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
                                                    <div class="progress-bar rbt-bg-color-black rounded-pill" style="width: 45%"></div>
                                                </div>
                                                
                                                <!-- Brand color progress bar -->
                                                <div class="mb-2">55%</div>
                                                <div class="progress mb-3" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
                                                    <div class="progress-bar rbt-bg-color-brand-700 rounded-pill" style="width: 55%"></div>
                                                </div>
                                                
                                                <!-- Gray color progress bar -->
                                                <div class="mb-2">65%</div>
                                                <div class="progress mb-3" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
                                                    <div class="progress-bar rbt-bg-color-gray-300 rounded-pill" style="width: 65%"></div>
                                                </div>
                                                
                                                <!-- Success color progress bar -->
                                                <div class="mb-2">75%</div>
                                                <div class="progress mb-3" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
                                                    <div class="progress-bar rbt-bg-color-success rounded-pill" style="width: 75%"></div>
                                                </div>
                                                
                                                <!-- Warning color progress bar -->
                                                <div class="mb-2">85%</div>
                                                <div class="progress mb-3" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
                                                    <div class="progress-bar rbt-bg-color-warning rounded-pill" style="width: 85%"></div>
                                                </div>
                                                
                                                <!-- Danger color progress bar -->
                                                <div class="mb-2">100%</div>
                                                <div class="progress mb-3" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
                                                    <div class="progress-bar rbt-bg-color-danger rounded-pill" style="width: 100%"></div>
                                                </div>
                                            
                                        

Labels

Long label text for the progress bar, set to a dark color
                                            
                                                <div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 16px;">
                                                <div class="b4 progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
                                            </div>
                                            
                                        

Striped

                                            
                                                <div class="progress mt--16" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 12px;">
                                                <div class="progress-bar progress-bar-striped rbt-bg-color-primary" style="width: 10%"></div>
                                            </div>
                                            <div class="progress mt--16" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 12px;">
                                                <div class="progress-bar progress-bar-striped rbt-bg-color-secondary" style="width: 25%"></div>
                                            </div>
                                            <div class="progress mt--16" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 12px;">
                                                <div class="progress-bar progress-bar-striped rbt-bg-color-black" style="width: 50%"></div>
                                            </div>
                                            <div class="progress mt--16" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 12px;">
                                                <div class="progress-bar progress-bar-striped rbt-bg-color-brand-700" style="width: 75%"></div>
                                            </div>
                                            <div class="progress mt--16" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 12px;">
                                                <div class="progress-bar progress-bar-striped rbt-bg-color-danger" style="width: 100%"></div>
                                            </div>