La interfaz de usuario semántica es un marco de código abierto que proporciona un segmento o parte de una página web que se utiliza para crear un grupo de contenido relacionado. Es muy similar al uso de bootstrap y tiene diferentes elementos para hacer que su sitio web sea más sorprendente usando jQuery y CSS para las interfaces. Para el estilo de los elementos, utiliza clases.
Un segmento se utiliza para crear una agrupación de contenido relacionado. La interfaz de usuario semántica proporciona clases para diseñar el elemento del segmento. Hay dos estados del segmento en la interfaz de usuario semántica, es decir, deshabilitado y cargando. En este artículo, aprenderemos sobre el estado de carga del segmento en la interfaz de usuario semántica.
En el estado Cargando , un segmento muestra que su contenido se está cargando. Se muestra un cargador animado en la parte superior del segmento para indicar esto. La interfaz de usuario semántica utiliza la clase de carga para convertir un segmento básico en un segmento de carga. Usamos las clases .ui y .segment de Semantic UI para crear un segmento normal.
Clase de estado de carga del segmento de interfaz de usuario semántica:
- loading: la clase convierte un segmento básico en la interfaz de usuario semántica en un segmento de estado de carga.
Sintaxis:
<div class="ui loading segment"> </div>
Ejemplo 1: este ejemplo demuestra el estado de carga del segmento básico en la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Semantic UI Loading Segment</strong> <br /><br /> </center> <div class="ui loading segment"> <center> <h3>Welcome to geeksforgeeks.</h3> <p>Learn anything you want</p> <p> Get tutorial of anything related to computer science. </p> <p>Courses on programming</p> <p>Solve programming problems.</p> <p>Help other by writing articles.</p> </center> </div> </body> </html>
Producción:
Estado de carga del segmento de interfaz de usuario semántica
Ejemplo 2: este ejemplo demuestra el estado de carga del segmento invertido en la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Semantic UI Inverted Loading Segment</strong> <br /><br /> </center> <div class="ui loading inverted segment" style="height: 300px;"> </div> </body> </html>
Producción:
Estado de carga del segmento de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/segment.html#loading
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA