https://github.com/truemedia/webcomponent-bar

A web component spec for bars, for making percentage/fraction based UI such as progress bars
https://github.com/truemedia/webcomponent-bar

Last synced: 1 day ago
JSON representation

A web component spec for bars, for making percentage/fraction based UI such as progress bars

• Host: GitHub
• URL: https://github.com/truemedia/webcomponent-bar
• Owner: Truemedia
• License: mit
• Created: 2015-06-02T20:27:03.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-08-26T20:03:31.000Z (about 9 years ago)
• Last Synced: 2023-03-11T05:00:12.083Z (over 1 year ago)
• Language: HTML
• Size: 145 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Web Component - Bar

A web component spec for bars, for making percentage/fraction based UI such as progress bars

This is an experimental spec as my first attempt at making a web component.

The base element is `` with 3 variations with specific attribute and styling differences. The content of the element serves as the label.

The main purpose of this repo is to slim down the complexity of bar based UIs, while adding some easy options for doing fancy looking things.

### Variations

- Progress bar, **percentage** attribute and **fraction** attribute with none animated expanding bar

- Health bar, **current-points** (integer) attribute, **min-points** (integer) attribute, **max-points** (integer) attribute with **color-boundaries** attribute for changing bar color based on number range

- Equalizer bar, **units** attribute serving as a label, **value** attribute for current value, **maxed** attribute for maximum value, and clipping attribute for displaying visual warning when maximum value reached or exceeded.

### Examples

##### Progress bar

    Running a process, please wait...

##### Health bar

	Health

##### Equalizer bar

    Track 1