Scroll Progress
How far the reader got: a bar that fills or a ring that closes as the page or a container scrolls.
c2-scroll-progress shows how far the reader got, like the reading-progress bar of Medium and Magic UI or the ring around a “back to top” button: a bar that fills, or a ring that closes, as the page or a container scrolls.
Import
import '@c2n/components/scroll-progress'Usage
Paragraph 1. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 2. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 3. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 4. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 5. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 6. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 7. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 8. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 9. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 10. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 11. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 12. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 1. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 2. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 3. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 4. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 5. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 6. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 7. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 8. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 9. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 10. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 11. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 12. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 1. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 2. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 3. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 4. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 5. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 6. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 7. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 8. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 9. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 10. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 11. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 12. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 1. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 2. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 3. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 4. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 5. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 6. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 7. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 8. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 9. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 10. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 11. A long article scrolls inside this area, and the bar above follows how far the reader got.
Paragraph 12. A long article scrolls inside this area, and the bar above follows how far the reader got.
What it follows
Without for, it follows the page. for names the id of a scroll container instead; for a c2-scroll-area it follows the area’s own viewport. Progress is read once per frame while scrolling, and again when the content changes size.
Placing it
It does not place itself. Pin a page’s bar in your own CSS:
c2-scroll-progress.page-progress {
position: fixed;
inset: 0 0 auto;
z-index: 10;
}Variants
variant="bar" (the default) is a thin bar that fills from the start edge; variant="ring" is a ring that closes, with a slot in its centre for an icon or a “back to top” button. Thickness, colours, ring size and stroke are CSS variables.
Accessibility
It is a progress bar named by label (“Reading progress” by default), whose value moves in whole percents so a screen reader is not flooded with updates.