AnimationComponentSVGAdded in v15.7

Orbit

A short label set around a circle, like a seal, turning slowly, with a slot in the middle for a mark that does not turn. The ring is static SVG, so the server draws it finished and even.

Installation

Import the class, and @use the entry point in your global styles. Nothing warns you when the @use is missing.

import { Component } from '@angular/core';
import { WrOrbit } from 'ngwr/animations/orbit';

@Component({ imports: [WrOrbit] })
export class MyComponent {}

Basic

Pass the label as text, separators included, ending on the separator that joins its end to its start: Open source · MIT · closes the loop as … MIT · OPEN SOURCE …. The glyphs are spread evenly over the exact circumference, so the last is followed by the first with the same gap as any two inside. What is projected sits in the middle and does not turn.

<wr-orbit text="Open source · MIT · Signals-first · ">
  <wr-icon name="ngwr" />
</wr-orbit>

Size and speed

size is the box in px; unset, --wr-orbit-size decides. speed is the turn at rest in degrees per second, 10 unset: negative turns the other way, zero sits still. hoverSpeed is the turn while a pointer is over the ring or focus is in it, 40 unset. A change of speed bends the motion rather than jumping it.

<wr-orbit text="Scroll down · " size="160" speed="-20" hoverSpeed="-80" />

Label and colour

label is what a screen reader hears; unset, the text with its trailing separator cut. In a link, the pointer and focus are read on the link, so the ring speeds up when the link is reached by keyboard too. The fill is currentColor through --wr-orbit-color, the type the theme's tokens.

<a href="/docs"><wr-orbit text="Read the docs · " label="Read the docs" /></a>
.seal {
  --wr-orbit-size: 8rem;
  --wr-orbit-color: var(--wr-color-primary-ink);
  --wr-orbit-font-size: 10px;
}

Accessibility

PartBehaviour
Screen readers The <svg> is role="img" named by label, or by the text with its trailing separator cut, and the ring's glyphs are aria-hidden, so the label is heard once. The slot's content keeps its own semantics.
SelectionThe ring is decorative and not selectable: a drag across the page does not pick up the legend.
Reduced motion Under prefers-reduced-motion: reduce the ring sits still, fully drawn. The demos on this page follow the same setting.
Server The ring is static markup, so the server renders it finished and even. The turn starts in the browser, only while the ring is on screen and the page is visible, and only where IntersectionObserver exists.

API

NameDescriptionTypeDefault
textrequiredThe text around the ring, separators included, ending on the separator that joins its end to its start.string—
labelWhat a screen reader hears. Defaults to the text with its trailing separator cut.string | nullnull
sizeThe box, in px. Unset, the stylesheet's --wr-orbit-size decides.unknownnull
speedTurn at rest, in degrees per second; negative turns the other way, zero sits still.number10
hoverSpeedTurn under a pointer or with focus in the host, in degrees per second.number40

CSS variables

Set these on the element itself, with a rule more specific than its Declared on selector. In a global stylesheet, put a class of yours on an ancestor it really has: <body> for an overlay panel, which renders outside your markup. In a component stylesheet the selector alone works, but only for an element in that component's own template. A value on a wrapper or :root is shadowed, because ngwr/animations/orbit declares each default on its own element.

VariableDefaultDeclared on
--wr-orbit-colorcurrentColor.wr-orbit
--wr-orbit-font-size9px.wr-orbit
--wr-orbit-size6rem.wr-orbit
--wr-orbit-weightvar(--wr-font-weight-semibold).wr-orbit

See also

2022 – 2026 © Roman Khegayv15.7.0