Astro

Astro renders Orbit's markup on the server as plain HTML. Import the stylesheet in the frontmatter and the runtime in a <script>, which Astro bundles for the browser. No framework island or client: directive is needed.

Install

npm install @zumer/orbit

A gauge

---
import '@zumer/orbit/style';
const value = 72;
---

<div class="gauge">
  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-10">
        <o-progress value={value} shape="rounded"></o-progress>
      </div>
      <div class="orbit-0">
        <div class="satellite at-center">
          <div class="capsule">{value}%</div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  import '@zumer/orbit';
</script>

<style>
  .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; }
</style>

To load Orbit from a CDN instead, put the <link> and <script> from Install in your layout's <head>, with is:inline on the script so Astro leaves it alone.

Inside a React, Vue or Svelte island, Orbit works as described on those pages.