What is the difference?
Progress Bar vs Spinner vs Ring vs Skeleton
The difference is what the wait tells you. A progress indicator talks about the operation: how much is done and how much is left. A skeleton talks about the result: here is the shape of the content that is coming, and here is where each piece will sit. One measures time, the other reserves space.
Ask yourself one question
Do you know the shape of what is coming, or only that something is running?
aria-valuenow="5"يتحرّك كل ٥٪ لا مع كل إطارProgress Bar vs Spinner vs Ring
مؤشّر التقدّمrole="progressbar"Use it when
Uploading a file, exporting a report, or any operation with a measurable percentage whose result has no predictable shape.
Full entrySkeleton
هيكل التحميلaria-busy="true"Use it when
Loading a list, a set of cards, or a profile page: content whose layout you already know, where the skeleton stops the page from jumping when data lands.
Full entryThe classic mistake
A skeleton whose blocks do not match the real content size. The page jumps when the data arrives, so the skeleton added the very jolt it was there to prevent.
Other comparisons