Open In App

Primer CSS Toast with Loading Animation

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Primer CSS Toast with loading animation</title>    
    <link  rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" />
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>Primer CSS Toast with loading animation</h3>
          
        <div class="Toast Toast--warning">
            <span class="Toast-icon">
                <svg width="16" height="16" fill="currentColor" 
                   class="Toast--spinner bi bi-arrow-repeat" 
                   viewBox="0 0 16 16">
                  <path d="M11.534 7h3.932a.25.25 .192.41l-1.966 
                      2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 
                      0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 
                      6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
  
                  <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 
                      0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 
                      0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 
                      1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
                  </svg>
            </span>
            
            <span class="Toast-content">
              GeeksforGeeks, Computer Science portal.
              </span>
        </div>
    </center>
</body>
  
</html>


Output:

Primer CSS Toast with Loading Animation

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Primer CSS Toast with loading animation</title>    
    <link  rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" />
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>Primer CSS Toast with loading animation</h3>
          
        <div class="Toast Toast--error">
            <span class="Toast-icon">
                <svg width="16" height="16" fill="currentColor" 
                     class="Toast--spinner bi bi-arrow-90deg-right" 
                     viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M14.854 4.854a.5.5 
                        0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 
                        4H3.5A2.5 2.5 0 0 0 1 6.5v8a.5.5 0 0 0 1 0v-8A1.5
                        1.5 0 0 1 3.5 5h9.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4z"/>
                  </svg>
            </span>
              
            <span class="Toast-content">
               <a href="www.geeksforgeeks.org">
                  GeeksforGeeks,
               </a
                Computer Science portal.
            </span>
        </div>
    </center>
</body>
  
</html>


Output:

Primer CSS Toast with Loading Animation

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



Last Updated : 24 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads