CSS knobs built with Orbit

A knob is the visual metaphor most people reach for when they need to communicate “set a value between A and B” — it’s the rotary control on a guitar amp, the volume dial on a stereo, the brightness wheel on a monitor. Building one in HTML traditionally means SVG paths and a thick layer of JavaScript. With Orbit, the knob body, the indicator markings, the progress fill, and even individual LEDs are all just <div> elements you can style with CSS.

These two examples cover the most useful knob variants: one with an analog progress arc, and one with discrete LED steps for stepped controls.

Examples

Knob with progress bar A textured rotary knob with a continuous green progress arc and tick marks. Best for volume, brightness, or any continuous value.

LED knob A two-tone knob with eleven LED indicators that light up as the value increases. Best for stepped levels and discrete settings.

When to use which

If your value is…	Pick	Why
Continuous (0–100)	Progress-bar knob	The arc gives sub-step resolution
Discrete (1–10, low/med/high)	LED knob	The LEDs map cleanly to whole steps
Mixed	Either, with snapping	Both can be made step-aware in JS

Both examples are built from the same Orbit primitives — bigbang, gravity-spot, nested orbits, and vector indicators — so once you’ve built one, the other is a small variation.

Related

• Gauges — when you need a needle instead of a knob body
• Circular progress bars — the underlying progress primitive used in knob #1
• Use case: audio app UI