JLDN Meters v

Thank you for choosing to download and use version of the JL Design Network meters. On this page you will find instructions on how to implement and use the meters. Additionally you will find examples of what the meters look like. At the bottom of this page is a todo list of future features and versioning to expect that feature in.

The versioning is not set in stone and likely that feature will be released sooner. The projected versioning is just a cushion for success.

Acknowledgements

These bars are based on the css layout provided by Chris Coyier @ CSS-Tricks and modified by Jeff Langdon @ JL Design Network.

Visit CSS-Tricks
Usage

1. Copy the "src" folder into your directory.

2. Copy/paste the following into the <head> of your HTML document above <style> / <script>.

<!-- JLDNMeter CSS -->
<link href="src/style.css" rel="stylesheet">

3. Copy/paste the following into the <head> of your HTML document between <style> / <script>. Alternatively, you can place the following lines in the <body> of your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<!-- JLDNMeter JS -->
<script type="text/javascript" src="src/script.js"></script>

4. Edit the JLDNMeter CSS <link> and the JLDNMeter JS <script> so that it points to the location of the "src" folder.

5. Copy/paste the code, from any of the styles found below, into your HTML document.

6. Set the visibility of the meter by changing the value of "reveal-width", or setting the "reveal-width" inside the "data-options" attribute, found in the <div> containing the 'meter' class.

Additional

Each meter requires a unique id in the <div> where the meter class is defined. Failure to include a unique id may result in unexpected or unusual behavior.

Data Options

Below is a list of current working meter options. These are seperate from the CSS classes, '.no-animation', '.no-candystripes' and the several border classes (which can be found in the styles section of this page).

  1. meter-length: Exclude this option to use the default 100% length. The following are built-in options.
    • super-long
      Super Long
    • x-long
      X Long
    • long
      Long
    • medium
      Medium
    • short
      Short
    • x-short
      X Short
    • super-short
      Super Short
  2. meter-thickness: Exclude this option to use the default 30px height. The following are built-in options.
    • super-thick
      Super Thick
    • x-thick
      X Thick
    • thick
      Thick
    • thin
      Thin
    • x-thin
      X Thin
    • super-thin
      Super Thin
  3. meter-color: Exclude this option to use the default gradient. This option accepts valid color names, hex codes, rgb/rgba strings, and hsl/hsla strings.
    • blue
    • rgba(255,0,0,0.6)
    • #0e8
    • hsl580,100%,20%)
  4. meter-shadow: Exclude this option for no box-shadow. This option requires a valid CSS box-shadow string.
    • 1px 1px 5px 1px #000
    • inset 1px 1px 5px 1px #000
  5. candystripe-color: Exclude this option to use the default candystripe. This option accepts valid CSS color names, hex codes, rgb/rgba strings, and hsl/hsla strings.
    • blue
    • rgba(255,0,0,0.6)
    • #000
    • hsl(0,100%,20%)
  6. animation-speed: Exclude this option for the default 2 second animation speed. This option accepts positive whole, or decimal, values.
    • 1
    • 10
  7. reveal-width: version 1 equivalent of data-width property. Exclude this option for 100% reveal.
    • 80%
    • 50%
  8. font-size: Exclude this option for the default page font size. Please note that the bar height does not change with font-size.
    • 16px
    • 2em
  9. font-color: Exclude this option to use the default font-color, black. This option accepts valid CSS color names, hex codes, rgb/rgba strings, and hsl/hsla strings.
    • blue
    • rgba(255,0,0,0.6)
    • #000
    • hsl(0,100%,20%)
Default
Appearance

This line is set to 95%

Implementation

<div id="default" class="meter" data-options='{"reveal-width":"95%"}'>
    <span>
        <span>
            <span>This line is set to 95%</span>
        </span>
    </span>
</div>

No-Animation
Appearance

This line is set to 90%

Implementation

<div id="barNA" class="meter no-animation" data-options='{"reveal-width":"90%"}'>
    <span>
        <span>
            <span>This line is set to 90%</span>
        </span>
    </span>
</div>

No-CandyStripe
Appearance

This line is set to 85%

Implementation

<div id="barNS" class="meter no-stripes" data-options='{"reveal-width":"85%"}'>
    <span>
        <span>
            <span>This line is set to 85%</span>
        </span>
    </span>
</div>

Rounded
Appearance

This line is set to 80%

Implementation

<div id="barR" class="meter meter-rounded" data-options='{"reveal-width":"80%"}'>
    <span>
        <span>
            <span>This line is set to 80%</span>
        </span>
    </span>
</div>

Rounded Top
Appearance

This line is set to 80%

Implementation

<div id="barRT" class="meter meter-rounded-top" data-options='{"reveal-width":"80%"}'>
    <span>
        <span>
            <span>This line is set to 80%</span>
        </span>
    </span>
</div>

Rounded Bottom
Appearance

This line is set to 80%

Implementation

<div id="barRB" class="meter meter-rounded-bottom" data-options='{"reveal-width":"85%"}'>
    <span>
        <span>
            <span>This line is set to 80%</span>
        </span>
    </span>
</div>

Rounded Left
Appearance

This line is set to 80%

Implementation

<div id="barRL" class="meter meter-rounded-left" data-options='{"reveal-width":"85%"}'>
    <span>
        <span>
            <span>This line is set to 80%</span>
        </span>
    </span>
</div>

Rounded Right
Appearance

This line is set to 80%

Implementation

<div id="barRR" class="meter meter-rounded-right" data-options='{"reveal-width":"85%"}'>
    <span>
        <span>
            <span>This line is set to 80%</span>
        </span>
    </span>
</div>

Rounded Top Right - Bottom Left
Appearance

This line is set to 80%

Implementation

<div id="barRTRBL" class="meter meter-rounded-trbl" data-options='{"reveal-width":"85%"}'>
    <span>
        <span>
            <span>This line is set to 80%</span>
        </span>
    </span>
</div>

Rounded Top Left - Bottom Right
Appearance

This line is set to 80%

Implementation

<div id="barRTLBR" class="meter meter-rounded-tlbr" data-options='{"reveal-width":"85%"}'>
    <span>
        <span>
            <span>This line is set to 80%</span>
        </span>
    </span>
</div>

CandyCane
Appearance

Implementation

<div id="candycane" class="meter no-animation meter-rounded" data-options='{"candystripe-color":"white","meter-color":"red"}'>
    <span>
        <span>
            <span></span>
        </span>
    </span>
</div>

Caution Stripe
Appearance

Implementation

<div id="caution-stripe" class="meter" data-options='{"candystripe-color":"white","meter-color":"black","animation-speed":0.6,"meter-shadow":"1px 1px 5px 1px rgba(255,255,255,0.4)"}'>
    <span>
        <span>
            <span></span>
        </span>
    </span>
</div>

Todo List (planned)