Orbit is a CSS framework for building radial UIs — gauges, donuts, knobs, pie menus, dashboards — with CSS only. No layout JavaScript. Works with plain HTML and any framework (React, Vue, Svelte).
Radial UIs usually need JavaScript to compute angles, radii, and positions. Orbit handles all of that with CSS classes and a couple of Web Components. Drop in two files and start building.
CDN (fastest):
<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
<script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js"></script>npm:
npm install @zumer/orbitimport '@zumer/orbit/style'
import '@zumer/orbit'Minimal gauge in 10 lines:
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-4">
<o-progress value="72"></o-progress>
</div>
</div>
</div>Structure: bigbang (container) → gravity-spot (center) → orbit-N (ring level) → o-progress or o-arc (the visual element).
| Element | Role |
|---|---|
.bigbang |
Root container, sets viewport |
.gravity-spot |
Center of the radial layout; holds rings |
.orbit-1 … .orbit-7 |
Rings at different radii (1 = innermost) |
.satellite |
Item placed on a ring (dot, label, icon) |
<o-arc> |
Arc segment (donut slice, gauge needle, menu sector); value 0–100, shape e.g. arrow, circle-a |
<o-progress> |
Simple progress ring |
.vector |
Tick/marker on a ring |
.side |
Stretch content along arc |
.capsule |
Wrapper for content inside satellite; required when satellite holds more than plain text |
Structure rules (avoid visual warnings):
.bigbang→ direct children:.gravity-spotonly.gravity-spot→ direct children:.orbit,.orbit-N, or.gravity-spotonly.satellite→ direct children:.capsuleor.gravity-spot(for nesting) only.orbit/.orbit-N→ do not nest other orbits; orbits live inside gravity-spoto-arcando-progress→ only work in circular orbits; they are hidden in elliptical shapes
Useful classes: range-180, range-270, range-360 (arc span); from-180 (start angle); fit-range (distribute items); shrink-50, gap-4 (spacing); at-center (place satellite in middle).
Orbit includes built-in themes. Add the theme class to .bigbang:
| Theme | Class | Description |
|---|---|---|
| Default | (none) | Transparent borders, gray fills, satellites use currentColor |
| Cyan | theme-cyan |
Cyan satellite borders, cyan vectors/sides, light cyan fills for o-arc and o-progress |
| Developer | dev-orbit |
Dashed red borders on orbits and satellites to visualize structure while debugging |
<!-- Default (no class) -->
<div class="bigbang">...</div>
<!-- Cyan theme -->
<div class="bigbang theme-cyan">...</div>
<!-- Developer mode for layout debugging -->
<div class="bigbang dev-orbit">...</div>You can combine themes, e.g. class="bigbang theme-cyan dev-orbit".
Orbit provides CSS visual warnings to catch invalid structure. When rules are broken (e.g. wrong children in gravity-spot or satellite), Orbit shows a red dotted border, grays out content, and displays a
Add class="dev-orbit" to your root container to enable developer mode: dashed red borders on gravity-spot, orbit, and satellite to visualize the layout structure. Useful for debugging.
<div class="bigbang dev-orbit">
<div class="gravity-spot">
...
</div>
</div>Orbit also checks browser support for :has() and trigonometric CSS functions (cos, sin); unsupported browsers show an upgrade message. See CSS visual aids in the full docs.
Browse examples on the Orbit docs site:
| Example | Link |
|---|---|
| Circular timer | circular_time |
| Progress bars | progress |
| Charts (donut, pie, sunburst) | charts |
| Gauges (180°, 240°, fuel) | gauges |
| Knobs | knobs |
| Pie menus | piemenu |
| Watch faces | watches |
| Chemical structures | chemical_structures |
| Calendars & time planners | calendar |
| Mandalas | mandalas |
| Dashboard | dashboard |
| Abstract orbital map | abstract_map |
- Dashboards: gauges, status rings, KPIs
- Automotive / HUD: speedometers, tachometers, battery, temp
- IoT / Smart home: thermostats, energy rings, scenes
- Ops / monitoring: status rings, uptime gauges
- Fitness / health: activity rings (Move, Exercise, Stand)
- Controls: knobs, radial menus, compass
- Full documentation — elements, tools, advanced examples
- Contributing
- GitHub Discussions
- Telegram