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
`.s-activity-indicator__sm`	`.s-activity-indicator`	Styles the activity indicator in a small size

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-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

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>

New activity

370

New activity

new

New activity

Grayson

New activity

New activities

New activity

370

New activity

new

New activity

Grayson

New activity

New activities

New activity

370

New activity

new

New activity

Grayson

New activity

New activities