Primer CSS Toast with Loading Animation

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.

Primer CSS offers Toast that is used to show live and time-sensitive responses to the user. In this article, we will discuss Toast with a loading animation. It uses Toast--spinner class on the toast-icon, SVG to add the loading state.

Primer CSS Toast with Loading Animation Classes:

• Toast: This class is the main container of the toast element of Primer CSS.
• Toast-icon: This class is used to define the toast icon.
• Toast--spinner: This class is used to add the spinner to the toast icon.
• Toast-content: This class contains the toast message along with the link.

Syntax:

<div class="Toast Toast--loading">
 <span class="Toast-icon">
 <svg class="Toast--spinner" viewBox="..." 
 width="..." height="...">
 <path fill="..." d="..."></path>
 <path fill="..." d="..."></path>
 </svg>
 </span>
 <span class="Toast-content">...</span>
</div>

Example 1: Below example illustrates the use of Primer CSS Toast with Loading Animation.

Output:

👁 Image

Example 2: Below is another example that illustrates the use of Primer CSS Toast with Loading Animation using link content text.

Output:

👁 Image

Reference: https://primer.style/#toast-with-loading-animation