Pure CSS gauge v0.2

Basic gauge component made with only CSS style rules. No SVG or canvas used in this component. This component can be easily themed by overriding default style rules and controlled through CSS variables and HTML markup elements. IE is not supported because CSS variables are not supported in it.

Live demo

Gauge parameters

Gauge background color:

--gauge-bg:#dadada;

Gauge value (integer 0-100):

--gauge-value:50;

Gauge display value (integer 0-9999):

--gauge-display-value:50;

How to use

Include gauge.min.css to your page:

<link rel="stylesheet" href="gauge.min.css?v=0.2">

Add some markup:

<div id="exampleGauge" class="gauge" 
    style=" --gauge-value:0; width:200px; height:200px;">
    <div class="ticks">
        <div class="tithe" style="--gauge-tithe-tick:1;"></div>
        <div class="tithe" style="--gauge-tithe-tick:2;"></div>
        <div class="tithe" style="--gauge-tithe-tick:3;"></div>
        <div class="tithe" style="--gauge-tithe-tick:4;"></div>
        <div class="tithe" style="--gauge-tithe-tick:6;"></div>
        <div class="tithe" style="--gauge-tithe-tick:7;"></div>
        <div class="tithe" style="--gauge-tithe-tick:8;"></div>
        <div class="tithe" style="--gauge-tithe-tick:9;"></div>
        <div class="min"></div>
        <div class="mid"></div>
        <div class="max"></div>
    </div>
    <div class="tick-circle"></div>
    <div class="needle">
        <div class="needle-head"></div>
    </div>
    <div class="labels">
        <div class="value-label"></div>
    </div>
</div>

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Jan 1, 2023

CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

Dec 8, 2022

Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

Dec 13, 2022

Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Dec 22, 2022

micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Mar 26, 2022

Semantic is a UI component framework based around useful principles from natural language.

Semantic UI Semantic is a UI framework designed for theming. Key Features 50+ UI elements 3000 + CSS variables 3 Levels of variable inheritance (simil

Dec 31, 2022

styled component for react & style-loader/usable

react-styled ES7 decorator for dynamic stylesheet usage w/ webpack install $ npm install bloody-react-styled --save-dev require import styled from "bl

Sep 26, 2022

Tailwind Card Component

Next.Js Project Name : Tailwind Card Component This is just a card commponent using tailwind css. it just awesome. Technologies Next.Js React.Js Tailw

Dec 18, 2022

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Jan 1, 2023

Releases(v0.2)

v0.2(Aug 31, 2020)
Release v0.2

Small layout fixes

Typos fixed

Removed duplicated documentation from example page

Source code(tar.gz)
Source code(zip)
v0.1(Aug 30, 2020)

Initial public release of CSS gauge
Source code(tar.gz)
Source code(zip)