Loaders
Loaders are visual indicators often shown during the loading process of a page or application. They inform users that a task is in progress, such as fetching data or loading content. They enhance user experience by providing visual feedback that something is happening in the background, preventing users from thinking the application is frozen. By using loaders you can reduce perceived waiting times and improve overall usability and satisfaction with the web app.
Placement
Loaders should either be prominent on the page where they cannot be missed, or in the area where content is being loaded in.
Loader Behavior
Loaders are not interactable, nor do they provide % completion like a progress indicator would. They primarily exist to assure your user that the app is functioning normally despite missing/incomplete content.
Accessibility Guidelines
Please choose the loader with a color contrasting the background it is placed upon appropriately.
Instructions
Create a div with the class of loader1a, loader1b, loader1c, or loader1d depending on the version you prefer