Design/Archive/Wikimedia User Interface/Use cases/Loading Indicators

This is a page dedicated to collecting all the loading indicators within the Wikimedia projects. These loading indicators are grouped into purposes such as loading indicators to indicate "content loading" and "tool loading." If you see more around, feel free to add to this page and group them accordingly. This associated task on Phabricator, where you can discuss this topic with us.

User:Splarka has done some analysis here that is also useful on how loaders will work on different colored backgrounds.

=Indeterminate= Intentions:
 * Gives users an idea that a button has been pushed and request has been executed
 * Gives users an idea that e.g. a page is loading

Content loading
           

Tool loading
   

=Determinate= Intentions:
 * Gives users an idea that a button has been pushed and request has been executed with an idea of the loading progress
 * Gives users an idea that e.g. a page is loading with an idea of the loading progress

Content loading
 <li style="display: inline-block; vertical-align: top;"> </li> </ul>

Tool loading
 <li style="display: inline-block; vertical-align: top;"> </li> </ul>