level

An interesting take on the single-value pie chart.
Totally ripped off from LevelMoney.

It requires jQuery.

It's on GitHub

Most basic usage:

<div class="level level-default" data-value="47"></div>

use data-value to set the percentage you want. level automagically adds the label and percent sign for you!

Custom labels:
...with appendages (pre and post)

<div class="level level-default" data-value="205" data-post=".26" data-pre="$"><div>

use data-label,data-pre, and data-post for more-prettyer labels.

Colors:
...ooooooh pretty...

Add one of these classes to your level:

level-default
level-warning
level-success
level-danger
level-info
level-primary
  • level-success
  • level-warning
  • level-default
  • level-danger
  • level-info
  • level-primary

Size
...make it bigger. Or smaller.

Add one of these classes to your level:

Border
...to border or not to border

<div class="level level-sm level-warning" data-value="50" data-label="yes"></div>
<div class="level level-sm evul-warning" data-no-border data-label="no" data-value="50"></div>
Use the data-no-border attribute to turn off borders.

Here are a bunch of examples...

Default

class="level level-default"
data-value="50"
data-post=".26"
data-pre="$"

Small, Danger

class="level level-danger level-sm"
data-value="30"

Info, X-Small

class="level level-info level-xs"
data-value="60"

Success, no border

class="level level-success"
data-value="60"
data-label="OK"
data-post="!" data-no-border

Large, Warning

class="level level-warning level-lg" data-value="20" data-post="%"

Primary, X-large

class="level level-primary level-xl" data-value="80"
level is a joetime creation