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. Está creado con el sistema de diseño de GitHub.
Primer menú CSS Select Loading se usa para cargar la lista de elementos mostrando la animación de carga usando la clase de carga SelectMenu. En este artículo, discutiremos la carga del menú de selección de Primer CSS.
Primer CSS Seleccione el menú Clase de carga:
- SelectMenu-loading: esta clase se utiliza para mostrar el estado de carga mediante la animación.
Sintaxis:
<details class="details-reset
details-overlay" open>
...
<div class="SelectMenu">
<div class="SelectMenu-modal">
<div class="SelectMenu-list">
<div class="SelectMenu-loading">
...
</div>
</div>
</div>
</div>
</details>
Ejemplo 1: Este ejemplo demuestra la implementación de Primer CSS Select menu Loading.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Select menu Loading </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body class="m-2"> <h1 class="color-fg-success"> GeeksforGeeks</h1> <h3> Primer CSS Select menu Loading </h3> <br> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Select menu Loading </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <div class="SelectMenu-list"> <div class="SelectMenu-loading"> <svg class="octicon octicon-octoface anim-rotate" viewBox="0 0 16 16" width="18" height="18" > <path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"> </path> </svg> </div> </div> </div> </div> </details> </body> </html>
Producción:
Primer CSS Seleccionar menú Cargando
Ejemplo 2: Este ejemplo demuestra la implementación del menú de selección de Primer CSS Cargando con encabezado y pie de página .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Select menu Loading </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body class="m-2"> <h1 class="color-fg-success"> GeeksforGeeks</h1> <h3> Primer CSS Select menu Loading </h3> <br> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Select menu Loading </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title"> GeeksforGeeks </h3> </header> <div class="SelectMenu-list"> <div class="SelectMenu-loading"> <svg class="octicon octicon-octoface anim-pulse" viewBox="0 0 16 16" width="18" height="18" > <path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"> </path> </svg> </div> </div> <footer class="SelectMenu-footer">Loading items...</footer> </div> </div> </details> </body> </html>
Producción:
Primer CSS Seleccionar menú Cargando
Referencia: https://primer.style/css/components/select-menu#loading
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA