Bars - Components - Spectre.css CSS Framework
Author: Yan Zhu
Description: Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Bars#

Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements.

25%
15%
10%
15%

Add a container element with the `bar` class. And add child elements with the `bar-item` class. The width percentage value is needed for every `bar-item`.

There is the `bar-sm` class for thinner Bars. Also, you could use Tooltips for any `bar-item`.

    <!-- normal bars -->
    <div class="bar bar-sm">
      <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- multi-bars -->
    <div class="bar">
      <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
      <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
    </div>

#### Slider bars#

You can add the `bar-slider` class to the Bars container. And add child elements with the `bar-item` class and `bar-slider-btn` inside bar-item. You need to set the `bar-item` width manually to have the slider point.

If there are two `bar-item` divs in one bar-slider, you will have a range slider.

    <!-- normal slider -->
    <div class="bar bar-slider">
      <div class="bar-item" role="progressbar" style="width:25%;">
        <button class="bar-slider-btn btn" role="slider"></button>
      </div>
    </div>

    <!-- range slider -->
    <div class="bar bar-slider">
      <div class="bar-item" role="progressbar" style="width:15%;">
        <button class="bar-slider-btn btn" role="slider"></button>
      </div>
      <div class="bar-item" role="progressbar" style="width:65%;">
        <button class="bar-slider-btn btn" role="slider"></button>
      </div>
    </div>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.