Primer CSS Loaders

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible.

The Loaders inform users that action is still in progress and might take a while to complete. This is a great way to inform users that the application is not in halt mode and is working in the background.

Primer CSS Loader Class:

• AnimatedEllipsis: This class is used to add 3 animated dots (...) at the end of the element to show the loading state. This class can be applied in combination with a variety of elements such as <h1> to <h6>, <span> and <button> elements, etc.

Syntax:

<span>Loading</span><span class="AnimatedEllipsis"></span>

Example 1: This example demonstrates the basic loader class in Primer CSS.

Output:

Example 2: This example demonstrates the luse of the Loader class with <div>, <span> and <button> element in Primer CSS.

Output: