Skip to content

Latest commit

 

History

History
33 lines (25 loc) · 795 Bytes

File metadata and controls

33 lines (25 loc) · 795 Bytes

JLDN Meters — Usage & Implementation Guide

Document: docs/usage.md
Author: Jeff Langdon (JL Design Network)


1. Quick Start

Step 1: Link CSS and JavaScript

<link rel="stylesheet" href="src/style.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="src/script.js"></script>

Step 2: Add Meter HTML

<div class="meter purple" data-value="85">
  <div class="meter-bar"></div>
  <span class="meter-text">85%</span>
</div>

2. Built-in Color Classes

  • .purple — Neon Violet to Magenta gradient
  • .blue — Deep Cyan to Sapphire gradient
  • .green — Emerald to Lime gradient
  • .orange — Amber to Fiery Red gradient
  • .candystripe — Enables continuous animated diagonal striping