🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Shimmer Theming Support

View in Pattern Lab

HTML Markup

<h3>Theming support for shimmer</h3>
<p>Shimmer also supports theming based on the SharePoint theme. This can be accomplished in two ways.
    The following three themes are supported.</p>
<ul>
    <li>No theme or<code>hoo-ph-primary</code>- use for the primary theme base background colors;</li>
<li><code>hoo-ph-neutral</code>- use for the neutral based background color gradient.</li>
<li><code>hoo-ph-fancy</code>- use for the fancy gradients based background color gradient.</li>
</ul>
<p>This style sheet classes can be added to a complete block as well es directly on the placeholder container.</p>
<h3>Block theming</h3>Apply any of the theming classes on the surrounding block.
<h4>No Theme on Block</h4>
<div>
    <div class="hoo-ph-circle">
    </div>
    <div class="hoo-ph-squared">
    </div>
    <div class="hoo-ph-row">
    </div>
</div>
<h4>Neutral Theme Block</h4>
<div class="hoo-ph-neutral">
    <div class="hoo-ph-circle">
    </div>
    <div class="hoo-ph-squared">
    </div>
    <div class="hoo-ph-row">
    </div>
</div>
<h4>Primary Theme Block</h4>
<div class="hoo-ph-primary">
    <div class="hoo-ph-circle">
    </div>
    <div class="hoo-ph-squared">
    </div>
    <div class="hoo-ph-row">
    </div>
</div>
<h4>Fancy Theme Block</h4>
<div class="hoo-ph-fancy">
    <div class="hoo-ph-circle">
    </div>
    <div class="hoo-ph-squared">
    </div>
    <div class="hoo-ph-row">
    </div>
</div>
<h3>Inline theming</h3>Apply any of the theming classes on the placeholder element.
<h4>No Theme on Block</h4>
<div class="hoo-ph-circle">
</div>
<div class="hoo-ph-squared">
</div>
<div class="hoo-ph-row">
</div>
<h4>Neutral Theme Block</h4>
<div class="hoo-ph-circle">
</div>
<div class="hoo-ph-squared">
</div>
<div class="hoo-ph-row">
</div>
<h4>Primary Theme Block</h4>
<div class="hoo-ph-circle hoo-ph-primary">
</div>
<div class="hoo-ph-squared hoo-ph-primary">
</div>
<div class="hoo-ph-row hoo-ph-primary">
</div>
<h4>Fancy Theme Block</h4>
<div class="hoo-ph-circle hoo-ph-fancy">
</div>
<div class="hoo-ph-squared hoo-ph-fancy">
</div>
<div class="hoo-ph-row hoo-ph-fancy">
</div>

Shimmer Theming Support

Guidelines for applying theme variations to shimmer loading components.

Overview

Shimmer components support multiple theming options to match the overall design system. Theming can be applied in two ways: either by adding a theme class to the shimmer element itself or by applying a theme class to the parent container.

Supported Theme Variants

  • Default/Neutral (hoo-ph-neutral) - Uses a neutral gray-based background gradient
  • Primary (hoo-ph-primary) - Uses the primary theme colors for the background gradient
  • Fancy (hoo-ph-fancy) - Uses a multi-colored gradient for a more vibrant effect

SCSS

Component Import

SCSS Partial Location

CSS Classes

  • Theme classes:
    • .hoo-ph-primary - Primary theme coloring
    • .hoo-ph-neutral - Neutral theme coloring (also the default)
    • .hoo-ph-fancy - Fancy gradient theme

Best Practices

  • Use consistent theming across related shimmer elements
  • Choose theme variants that match or complement your application’s color scheme
  • Use the fancy theme sparingly and only when it aligns with your brand’s visual style
  • Consider using the primary theme for greater visual connection to your brand
  • Use the neutral theme for general-purpose loading states or when subtlety is preferred

Animation

All shimmer variants use the same animation timing and style, only the colors of the gradients differ. The animation is a continuous left-to-right movement of the background gradient.

Accessibility

  • Ensure sufficient contrast between the shimmer gradient colors and the background
  • Consider users with motion sensitivity when using shimmer effects extensively
  • Do not rely on color alone to convey the meaning of different shimmer themes