El componente de carga de Spectre se usa para crear un indicador de carga que se usa para cargar o actualizar. Puede agregar la clase de carga a un contenedor para el estado de carga. Podemos utilizar indicadores de carga de gran tamaño.
Clase de carga de espectro:
- loading: esta clase se utiliza para crear un indicador de carga.
- loading-lg: esta clase se utiliza para crear un indicador de carga grande.
Sintaxis:
<div class="loading"> .... </div> <div class="loading loading-lg"> .... </div>
Ejemplo: El siguiente ejemplo ilustra la carga de espectros.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE Loading Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Loading Class</strong> </center> <br> <strong>Normal Size Loading Indicator:</strong> <button class="btn btn-success loading"> Upload-Pic </button> <button class="btn btn-error"> Cancel Uploading </button> <br><br> <strong>Large Size Loading Indicator:</strong> <button class="btn btn-success loading loading-lg"> Upload-Pic </button> <button class="btn btn-error"> Cancel Uploading </button> </body> </html>
Producción:
Carga de espectro
Referencia: https://picturepan2.github.io/spectre/utilities/loading.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA