Skip to content
Learn Netverks

Lesson

Step 27/36 75% through track

progress-loading

Progress and loading

Last reviewed May 28, 2026 Content v20260528
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
intermediate

This lesson

This lesson teaches Progress and loading—the ideas, syntax, and habits you need before moving on in Pico CSS.

Class-light frameworks teach when semantic HTML alone should carry the design.

You will apply Progress and loading in contexts like: Documentation sites, blogs, internal tools, and side projects where you want polish without a large class vocabulary.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Use the native <progress> element for determinate bars (upload percent, course completion) and the indeterminate state when the value is unknown. Pico styles the bar without chart libraries or spinners.

Loading with aria-busy

Add aria-busy="true" to article, inline text, or button while async work runs—Pico shows a loading treatment on that node. Pair with visible text (“Saving…”) so screen reader users hear progress, not silence.

Compared to framework spinners

Bootstrap’s spinner-border is a separate component; Pico favors busy regions tied to the element being updated—closer to how docs sites skeleton-load a card.

Self-check

  1. Which element shows an unknown-duration wait state?
  2. What attribute marks a button as busy during fetch?

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • progress max value?
  • Busy state for SR?

Sign up or log in to post comments and sync lesson progress across devices.

No discussion yet. Be the first to ask a question.

Jump

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36