# Ux Loaders And Progress > Design or critique loading states and progress indicators — match the feedback type (spinner, text, determinate bar, skeleton, progress tracker) to the wait duration and task structure, and manage perceived performance. Trigger when the user asks to design or review loaders, spinners, loading states, skeleton screens, progress bars, progress trackers, steppers, or multi-step flow progress. - **Type:** Skill - **Install:** `agentstack add skill-uxcel-lab-product-skills-loaders-and-progress` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [Uxcel-Lab](https://agentstack.voostack.com/s/uxcel-lab) - **Installs:** 0 - **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [Uxcel-Lab](https://github.com/Uxcel-Lab) - **Source:** https://github.com/Uxcel-Lab/product-skills/tree/main/ux/components/loaders-and-progress - **Website:** https://uxcel.com ## Install ```sh agentstack add skill-uxcel-lab-product-skills-loaders-and-progress ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Loaders & Progress Skill ## How this skill behaves (read first) This is a **generative** skill. The default failure modes: **one spinner for everything** (a full-page spinner whether the wait is 1 second or 60), **no endpoint when one exists** (indeterminate loops for measurable tasks), and **progress theater** (trackers on 2-step forms, percentages that lie). The feedback type is determined by *wait duration* and *task structure* — and a loader's real job is shaping perceived time, not decorating it. This skill gates: 1. **Establish the wait type** — how long, is it measurable, what initiated it, is it a multi-step journey? 2. **Apply the always-true core** — the duration ladder, placement, state visibility. 3. **Surface the context-dependent decisions** (skeletons, custom animation, tracker labeling, save/autosave) with trade-offs. Then it **hands off to `ux-heuristics-audit`, `ux-accessibility-audit`, `ux-aesthetics-audit`, and `ux-microcopy-audit`** for validation. --- ## Step 0 — Establish the wait type Four questions pick the indicator: - **How long is the wait?** Hand-offs name each lens by its installable skill `name`. Invoke one only if that skill is installed; if it isn't, this skill's own core already carries these rules — proceed without it rather than blocking. After generating or revising, hand the result to the audit lenses rather than declaring it done. These are **candidate** lenses — posture is set by `docs/orchestration-policy.md`, or route the whole thing through `ux-design-review`. Here, **`heuristics` and `microcopy` are Tier A (auto-run); `accessibility`, `aesthetics`, and `mobile-responsiveness` are Tier B (offered)** — under an existing design system `aesthetics` is suppressed and `accessibility` narrows to usage; `mobile-responsiveness` applies only on mobile. If the user invoked this skill for one specific thing, respect that scope. - **`ux-heuristics-audit`** *(Tier A)* — visibility of system status is this component's entire reason to exist; also error prevention (disabled buttons during processing). - **`ux-accessibility-audit`** *(Tier B — offer; narrow under a design system)* — loading states announced to screen readers, animation respecting reduced-motion preferences, contrast of muted tracker steps. - **`ux-aesthetics-audit`** *(Tier B — offer; suppress under a design system)* — skeleton fidelity to real layout, animation restraint, tracker visual hierarchy. - **`ux-microcopy-audit`** *(Tier A)* — text-loader wording, step labels, percentage/status phrasing. - **`ux-mobile-responsiveness-audit`** *(Tier B — offer; applies only on mobile)* — when the context is mobile: tracker compression, skeleton reflow. If the audits surface a conflict (e.g., brand animation vs. perceived speed), resolve back toward the primary task: the user is waiting — every design choice either shortens that wait perceptually or lengthens it. --- ## Common do/don't patterns | ❌ Don't | ✅ Do | |---|---| | Full-page spinner for everything | Inline spinners, skeletons for content, centered only for true page loads | | Looping spinner on a 60-second upload | Determinate bar with endpoint + percentage | | Spinner where the layout is known | Skeleton screens, filled sequentially | | Clickable button while its action processes | In-button spinner, button disabled | | Loader floating far from its cause | Feedback at the action or on the content | | Progress tracker on a 2-step form | Trackers from 3 stages; short forms stay plain | | Unlabeled tracker dots | Step titles + clear completed/current/remaining states | | 11-step tracker as a fix for a bloated form | 5–7 steps max; restructure the flow | | % that jumps 10→80→82→… | Honest progress mapping, or use steps | | Long form with no save | Autosave + return to the last step | | Ship without checking | Hand off to heuristics + accessibility + aesthetics + microcopy | --- ## Source lessons (Uxcel) - [How to Design Loaders to Keep Users Engaged](https://uxcel.com/lessons/basics-i-971) - [How & When to Use Progress Trackers in UIs](https://uxcel.com/lessons/basics-559) - [Showing Progress](https://uxcel.com/lessons/showing-progress-644) ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [Uxcel-Lab](https://github.com/Uxcel-Lab) - **Source:** [Uxcel-Lab/product-skills](https://github.com/Uxcel-Lab/product-skills) - **License:** MIT - **Homepage:** https://uxcel.com Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-uxcel-lab-product-skills-loaders-and-progress - Seller: https://agentstack.voostack.com/s/uxcel-lab - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.