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 orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible.
Los cargadores informan a los usuarios que la acción aún está en curso y puede tardar un poco en completarse. Esta es una excelente manera de informar a los usuarios que la aplicación no está en modo detenido y que está funcionando en segundo plano.
Primer Clase de cargador CSS:
- AnimatedEllipsis : esta clase se usa para agregar 3 puntos animados (…) al final del elemento para mostrar el estado de carga. Esta clase se puede aplicar en combinación con una variedad de elementos como los elementos <h1> a <h6>, <span> y <button>, etc.
Sintaxis:
<span>Loading</span><span class="AnimatedEllipsis"></span>
Ejemplo 1: este ejemplo demuestra la clase de cargador básico en Primer CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Primer CSS</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1>GeeksforGeeks</h1> <strong>Primer CSS Loader</strong> <br> <span>Loading</span><span class="AnimatedEllipsis"> </span> </center> </body> </html>
Producción:
Producción
Ejemplo 2: Este ejemplo demuestra el uso de la clase Loader con los elementos <div>, <span> y <button> en Primer CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Primer CSS</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>Primer CSS Loader</h3> <br> <span>Component Loading</span> <span class="AnimatedEllipsis"></span><br> <div class="branch-name mt-3"> <span>Video Loading</span> <span class="AnimatedEllipsis"></span> </div> <br/> <div class="Label mt-4"> <span>Module Loading</span> <span class="AnimatedEllipsis"></span> </div> <br/> <button class="btn mt-4" aria-disabled="true"> <span>Button Loading</span> <span class="AnimatedEllipsis"></span> </button> </center> </body> </html>
Producción:
Primer cargador CSS
Referencia: https://primer.style/css/components/loaders
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA