Skip to content
COHO
Atrium design system

COHO docs

Atrium

COHO

v0.1
AI Building

Build an Atrium app with AI

One minimised file with everything an AI tool needs: how to work, the hard rules, the full app contract and the design system. Upload it to any LLM, then describe your app.

ATRIUM-AI-BUILD.mdMarkdown
  1. Upload the file to ChatGPT, Claude, Cursor or any AI tool (or paste its contents).
  2. Describe the app you want in plain English.
  3. Let the AI ask you for the API key when it needs one.
View the file
Auto

Component · Feedback

Spinner and skeleton

View .md

Stable

Loading indicators show that something is on its way. Use a spinner for a short wait or an action in progress. Use skeleton lines when you know the shape of what is coming, such as rows of a list, so the page does not jump when it loads.

Both stop moving for people who have turned on reduced motion.

Loading readings

Specifications

Anatomy

Loading readings
1) Spinner (.at-spinner)
20px by 20px
border: 2px solid var(--at-border)
border-top-color: var(--at-border-primary)
animation: 0.8s spin
2) Skeleton line (.at-skeleton)
height: 1rem /* 16px */
background: var(--at-bg-neutral)
border-radius: var(--at-radius-1)
animation: 1.4s pulse

Size and spacing

Skeleton widths
.at-skeleton: 100%
.at-skeleton--medium: 70%
.at-skeleton--short: 40%
Spinner
width and height: 1.25rem /* 20px */

Spinner

A short wait, or an action in progress. Put a few words beside it.

Example

Loading readings

Skeleton

Placeholder lines in the shape of the content that is coming. Mix widths so it looks like text.

Example

Usage

When to use

  • Spinner: waiting for a short load or a save.
  • Skeleton: the first load of a list, table or card.

When not to use

  • Loads that finish in under about 300ms: show nothing, to avoid a flash.
  • Nothing to load: use an empty state.

Content

  • Say what is loading: "Loading readings", not just "Loading".

Do and don't

Loading readings
DoOne spinner with a short label.
Don'tSeveral spinners and no label.

Do

  • Keep the layout stable while loading.

Don't

  • Show a spinner for the whole screen.

Implementation

HTML

<div class="at-stack at-stack--tight">
  <div class="at-inline"><span class="at-spinner" role="status" aria-label="Loading"></span> Loading readings</div>
  <span class="at-skeleton at-skeleton--short"></span>
  <span class="at-skeleton at-skeleton--medium"></span>
</div>

Classes

ClassWhat it does
at-spinnerRotating ring
at-skeletonGrey placeholder bar, full width
at-skeleton--short / --medium40% / 70% width

Tokens used

--at-border, --at-border-primary, --at-bg-neutral

Accessibility

  • Give the spinner role="status" and a label. Animations stop when reduced motion is on.

Related

Empty state

What to show when there is nothing to show yet.

View component

Button

Buttons do things. Links go places.

View component