Sections

Activity indicator

Stacks provides a small jewel for indicating new activity.

Classes

Class	Applied to	Description
`.s-activity-indicator`	N/A	Base activity indicator element with theme-aware coloring
`.s-activity-indicator__success`	`.s-activity-indicator`	Styles the activity indicator in a success state
`.s-activity-indicator__warning`	`.s-activity-indicator`	Styles the activity indicator in a warning state
`.s-activity-indicator__danger`	`.s-activity-indicator`	Styles the activity indicator in a danger state

Examples

Section titled Examples

Default

Section titled Default

By default, our indicator has no positioning attached to it. Depending on your context, you can modify the activity indicator’s positioning using any combination of atomic classes. Since our activity indicator has no inherent semantic meaning, make sure to include visually-hidden, screenreader-only text with the v-visible-sr class.

<div class="s-activity-indicator">
    <div class="v-visible-sr">New activity</div>
</div>

<div class="s-activity-indicator">
    …
    <div class="v-visible-sr">…</div>
</div>

<div class="s-activity-indicator">
    …
    <div class="v-visible-sr">…</div>
</div>

<div class="s-activity-indicator">
    …
    <div class="v-visible-sr">…</div>
</div>

<div class="s-activity-indicator">
    …
</div>

<a href="#" class="s-link s-link__muted">
    <div class="s-avatar bg-red-400 ps-relative">
        <div class="s-activity-indicator ps-absolute tn6 ln6">
            <div class="v-visible-sr">…</div>
        </div>
        <div class="s-avatar--letter">…</div>
        @Svg.ShieldXSm.With("native s-avatar--badge")
    </div>
    <span class="pl4">…</span>
</a>

<div class="ps-relative">
    @Svg.Bell

    <div class="s-activity-indicator ps-absolute tn4 rn4">
        <div class="v-visible-sr">…</div>
    </div>
</div>

New activity

370

New activity

new

New activity

Grayson

New activity

Variations

Section titled Variations

Stacks also provides alternative styling for success, warning, and danger states.

<div class="s-activity-indicator s-activity-indicator__success">
    <div class="v-visible-sr">…</div>
</div>
<div class="s-activity-indicator s-activity-indicator__warning">
    <div class="v-visible-sr">…</div>
</div>
<div class="s-activity-indicator s-activity-indicator__danger">
    <div class="v-visible-sr">…</div>
</div>