Aurora Ring

A progress ring whose arc is an aurora living inside a glass tube — curtains of light flow along it, the head glows, and it flashes when it completes.

16%

Uploading

51%

Upload · Polar

90%

Move

412 / 600 kcal

Daily goal · Ember Pro

92%

Rendering

Render queue · Spectrum Pro

Playground

72%

Theme

Preset

Value · 72%

Size · 180px

Thickness · 14px

Flow speed · 1.0×

<script src="/aurora-ring.free.js" defer></script>

<aurora-ring
  value="72"
  size="180"
  thickness="14"
  theme="light"
  speed="1"
  label="Upload progress"
>72%</aurora-ring>

<script>
  const ring = document.querySelector('aurora-ring');
  upload.onprogress = (e) => {
    const pct = Math.round(100 * e.loaded / e.total);
    ring.setAttribute('value', pct);
    ring.textContent = pct + '%';
  };
</script>