Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos , como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible.
Primer CSS ofrece Toast que se utiliza para mostrar al usuario respuestas en vivo y sensibles al tiempo. En este artículo, hablaremos de Toast con una animación de carga. Utiliza la clase Toast-spinner en el icono de brindis, SVG para agregar el estado de carga.
Primer CSS Toast con clases de animación de carga:
- Toast: esta clase es el contenedor principal del elemento brindis de Primer CSS.
- Toast-icon: esta clase se utiliza para definir el icono de tostadas.
- Toast–spinner: esta clase se usa para agregar la rueda giratoria al ícono de tostadas.
- Toast-content: esta clase contiene el mensaje de brindis junto con el enlace.
Sintaxis:
<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>
Ejemplo 1: El siguiente ejemplo ilustra el uso de Primer CSS Toast con 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>
Producción:
Primer CSS Toast con animación de carga
Ejemplo 2: a continuación se muestra otro ejemplo que ilustra el uso de Primer CSS Toast con Loading Animation usando el texto del contenido del enlace .
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>
Producción:
Primer CSS Toast con animación de carga
Referencia: https://primer.style/css/components/toasts#toast-with-loading-animation