Svelte

Svelte needs no setup for Orbit: custom elements with a dash in their name are passed through as they are. Import the two files and write the markup.

Install

npm install @zumer/orbit

A gauge

A progress ring with its value in the middle, bound to state (Svelte 5):

<script>
  import '@zumer/orbit/style';
  import '@zumer/orbit';
  import './gauge.css';

  let value = $state(72);
</script>

<div class="gauge">
  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-10">
        <o-progress {value} shape="rounded"></o-progress>
      </div>
      <div class="orbit-0">
        <div class="satellite at-center">
          <div class="capsule">{value}%</div>
        </div>
      </div>
    </div>
  </div>
  <input type="range" min="0" max="100" bind:value>
</div>

/* gauge.css */
.gauge { width: 220px; }
.gauge .orbit-10 { --o-size-ratio: 2; }
.gauge .orbit-0 { --o-size-ratio: 12; }
.gauge o-progress {
  --o-fill: var(--o-cyan);
  --o-back-fill: var(--o-cyan-lighter);
  --o-stroke: none;
}
.gauge .capsule { font-size: 28px; font-weight: 600; }

In Svelte 4, write let value = 72 instead of $state(72). The CSS can also live in the component's <style>: everything it targets is in the markup, so scoping does not get in the way.

Orbit watches the page for added, removed and reordered elements, attribute and style changes, and containers that change size, so a re-render needs no extra call. To wait until arcs are drawn, or to update after a change Orbit cannot see, use the runtime API.

SvelteKit

Importing Orbit during server rendering is safe, so it needs no onMount guard. Import the stylesheet and the runtime once in src/routes/+layout.svelte and every page can use Orbit.