Loading indicator
A loading indicator is a user-interface element that signals an ongoing operation, such as loading, initialization, or data retrieval.
Tiny CSS Projects
A loading indicator is a visual or textual interface signal that an operation is in progress or awaiting completion.
- How it is used
- Uses visual motion, progress feedback, and explanatory text to reassure users during operations that take longer than one second.
- How deep it goes
- Explains implementation from HTML scaffolding through SVG geometry, responsive sizing, progress styling, and CSS animation timing.
- Examples
- Demonstrates eleven animated SVG rectangles, a “Scanning channels” message, and a progress bar set to 32 of 100.
- What you can do after
- Build a responsive animated loader with SVG bars, accessible status text, a progress element, and tunable CSS animation.
Design for Developers
A loading animation is a visual indicator that communicates ongoing processing or waiting in an interactive interface.
- How it is used
- Communicates system status while pages, forms, uploads, downloads, or other operations remain incomplete.
- How deep it goes
- Explains when to use animations, skeleton content, or progress bars, but stops short of implementation details.
- Examples
- Uses blank pages, submitted order forms, skeleton content, progress bars, and a website-scanner waiting queue.
- What you can do after
- Apply loading feedback to reduce uncertainty during delayed page loads, form submissions, and longer-running operations.
Related concepts
- meanaddressed by · A mean is a measure of central tendency, calculated as the arithmetic average of values or, for a random variable, as the probability-weighted average of its possible values.
- Rectanglehas part · A rectangle is a planar quadrilateral with four right angles and opposite sides of equal length.
- viewbox attributeconfigured by · The SVG viewBox attribute defines the origin and dimensions of an internal coordinate system and maps it to the viewport.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.