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.
<!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.
<!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