Animated Icon

Animated Icon

Animate an existing sprite icon. It inherits the surrounding text color and reserves a fixed square so nearby content stays still. Set --size to change the default 32px size.

Add .pv-animated-icon-loading for the loading animation: the icon gently wobbles and a highlight moves across its strokes. The highlight is a second layer using the same sprite symbol with .pv-animated-icon-sheen and the shared .pv-sheen utility. Without the modifier, the icon is static.

The Vue PvAnimatedIcon and <pv-animated-icon> web component accept the same props as PvIcon (name and size), plus animationVariant: "loading" (default) or "static".

The icon is decorative and does not measure progress. Pair it with visible loading text, and use role="status" on the containing message when it should be announced. Reduced motion disables both animations and hides the highlight, leaving the original icon visible.

<div class="pv-flex" role="status" aria-atomic="true">
  <span class="pv-animated-icon pv-animated-icon-loading pv-text-brand" aria-hidden="true">
    <svg class="pv-icon"><use xlink:href="#file"></use></svg>
    <svg class="pv-icon pv-animated-icon-sheen pv-sheen"><use xlink:href="#file"></use></svg>
  </span>
  <p>Building report…</p>
</div>