Skip to main content

Activity indicator

Razor

Stacks provides a small jewel for indicating new activity.

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

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
3
New activity
12
New activity
370
New activity
new
New activity
New activity
G
Grayson
New activity

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
3
New activity
12
New activity
370
New activity
new
New activity
New activity
G
Grayson
New activity
New activity
3
New activity
12
New activity
370
New activity
new
New activity
New activity
G
Grayson
New activity
New activity
3
New activity
12
New activity
370
New activity
new
New activity
New activity
G
Grayson
New activity
Deploys by Netlify