Get boba!
boba Version 1.7.2
  • Introduction
  • Installation
  • Customize
  • Compatibility
  • Changelog
  • Breakpoints
  • Colors
  • Typography
  • Containers
  • Grid
  • Navbar
  • Sections
  • Sidebar
  • Banners
  • Breadcrumbs
  • Cards
  • Collapsible
  • Messages
  • Notifications
  • Pagination
  • Tabs
  • Tables
  • Blockquotes
  • Buttons
  • Code
  • Counters
  • Descriptions
  • Dividers
  • Labels
  • Lists
  • Progress
  • Checkboxes
  • Inputs
  • Radios
  • Selects
  • Switches
  • Textareas
  • Animations
  • Background
  • Borders
  • Display
  • Flex
  • Images
  • Shadows
  • Shapes
  • Sizing
  • Spacing
  • Text

Elements

Learn how to build your website with boba!

Progress

Visualize progress by setting the CSS width property.

Default 25%

Default 50%

Default 75%

Default 100%
<div class="progress">
    <div class="progress-bar" style="width:50%">
        Default 50%
    </div>
</div>

Sizes

Progress bars can be resized.
Small

Default

Medium

Large
<div class="progress">
    <div class="progress-bar small" style="width:50%">
        Small
    </div>
</div>

<div class="progress">
    <div class="progress-bar" style="width:50%">
        Default
    </div>
</div>

<div class="progress">
    <div class="progress-bar medium" style="width:50%">
        Medium
    </div>
</div>

<div class="progress">
    <div class="progress-bar large" style="width:50%">
        Large
    </div>
</div>

Styles

Change the look of your progress bars with ease.

Striped

Add a striped pattern to your progress bars using the .striped class.
Striped
<div class="progress">
    <div class="progress-bar striped" style="width:50%">Striped</div>
</div>

Outlined

Progress bars become colored outlines when using the .outlined class.
Outlined
<div class="progress">
    <div class="progress-bar outlined" style="width:50%">Outlined</div>
</div>

Stacking

Combine multiple progress bars in one progress element to compare related information.
Music
Photos
Apps

Ready
Buffering
Blocked
<div class="progress">
    <div class="progress-bar red" style="width:10%">
        Music
    </div>
    <div class="progress-bar blue" style="width:40%">
        Photos
    </div>
    <div class="progress-bar yellow" style="width:20%">
        Apps
    </div>
</div>

<div class="progress">
    <div class="progress-bar green" style="width:15%">
        Ready
    </div>
    <div class="progress-bar striped orange" style="width:40%">
        Buffering
    </div>
    <div class="progress-bar outlined purple" style="width:25%">
        Blocked
    </div>
</div>

Colors

Change the color of your progress bar using boba's eye-catching color palette.
Red

Orange

Yellow

Green

Teal

Blue

Indigo

Purple

Pink
<div class="progress">
    <div class="progress-bar green" style="width:50%">
        Green
    </div>
</div>