Activity indicator

Stacks provides a small jewel for indicating new activity.

Classes

Class	Description	Modifies
`.s-activity-indicator`	Base activity indicator element with theme-aware coloring	N/A
`.s-activity-indicator__success`	Applies success state styling	`.s-activity-indicator`
`.s-activity-indicator__warning`	Applies warning state styling	`.s-activity-indicator`
`.s-activity-indicator__danger`	Applies danger state styling	`.s-activity-indicator`
`.s-activity-indicator__sm`	Renders the indicator at a smaller size	`.s-activity-indicator`

Examples

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-avatar--indicator s-activity-indicator s-activity-indicator__sm">
            <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.Notification

    <div class="s-activity-indicator s-activity-indicator__sm ps-absolute tn4 rn4 ba baw2 bc-white box-content">
        <div class="v-visible-sr">…</div>
    </div>
</div>

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

    <div class="ps-absolute ba baw2 bc-white bar-pill lh-xs tn8 rn8">
        <div class="s-activity-indicator">
            3 <div class="v-visible-sr">…</div>
        </div>
    </div>
</div>

New activity

370

New activity

new

New activity

Grayson

New activity

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">New activity</div>
</div>
<div class="s-activity-indicator s-activity-indicator__warning">
    <div class="v-visible-sr">New activity</div>
</div>
<div class="s-activity-indicator s-activity-indicator__danger">
    <div class="v-visible-sr">New activity</div>
</div>

New activity

370

New activity

new

New activity

Grayson

New activity

370

New activity

new

New activity

Grayson

New activity

370

New activity

new

New activity

Grayson

New activity