Primitives

RingProgress

A determinate ring — the same role="progressbar" as Progress, drawn as one conic-gradient rather than an SVG. label names it and the children fill its middle: a ring reading "70%" still has to say what is 70%.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

70%

Code

index.html

<div
  class="aura-ring"
  role="progressbar"
  aria-valuenow="70"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Storage used"
  style="--aura-ring:70"
>
  <span class="aura-ring__label">70%</span>
</div>

Demo.tsx

import { RingProgress } from '@ilomee/aura-react';

/** Mirrors the `ring-progress` html snippet in the registry — that snippet is what every stack
 *  is diffed against. */
export default function Demo() {
  return (
    <RingProgress value={70} label="Storage used">
      70%
    </RingProgress>
  );
}

Demo.vue

<script setup lang="ts">
import { RingProgress } from '@ilomee/aura-vue';
</script>

<template>
  <RingProgress :value="70" label="Storage used">70%</RingProgress>
</template>

Demo.svelte

<script lang="ts">
  import { RingProgress } from '@ilomee/aura-svelte';
</script>

<RingProgress value={70} label="Storage used">70%</RingProgress>

Used as aura-ring-progress.

demo.component.ts

import { AuraRingProgress } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraRingProgress],
  template: `<aura-ring-progress [value]="70" label="Storage used">70%</aura-ring-progress>`,
})
export class DemoComponent {}

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
value	`number`	`0`	0–100. Clamped: a ring past its own end is a bug the caller should not see.
label	`string`	—	Names the ring for assistive tech. Not the visible centre text — that is `children`.
childrenslot	`ReactNode`	—	Centre content. The span is rendered even when empty, so all four stacks emit the same DOM — Angular cannot detect empty projection.

Name	Type	Default
value	`number`	`0`
label	`string`	—
defaultslot	`slot`	—

Name	Type	Default
value	`number`	`0`
label	`string`	—
childrenslot	`Snippet`	—

Name	Type	Default
value	`number`	`0`
label	`string`	—
ng-contentslot	`content`	—

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-ring	base	Required. A modifier does nothing without it.
.aura-ring__label	element

Tokens and rules

components.css

sweep: conic-gradient(var(--accent) calc(var(--aura-ring) * 1%), var(--surface-3) 0)
size: var(--avatar-lg)
thickness: var(--ring-thickness) — the middle is punched out by ::before
tween: @property --aura-ring — without it the angle jumps instead of animating