Progress Bar V10

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A transactions table with a thin indeterminate loading bar along its top edge and a buffer bar in the footer that shows downloaded rows running ahead of processed rows. While loading, the table region is marked aria-busy and its cells turn into shimmering skeleton blocks. The Load latest button runs the whole sequence, and the page simulates one load when it opens.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 221 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Two-runner indeterminate bar with no aria-valuenow, as the ARIA pattern expects
• Buffer bar with processed, downloaded and waiting states
• aria-busy region and a status line that announces loading and completion
• Skeleton cells reuse the real table markup
• Reduced motion swaps the runners for a slow pulse