La interfaz de usuario semántica es un marco que se utiliza para crear una excelente interfaz de usuario. Es un marco de código abierto que utiliza CSS y jQuery. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
La clase de entrada de interfaz de usuario semántica se utiliza para crear una interfaz de usuario de entrada básica. El estado de carga de entrada de la interfaz de usuario semántica se usa para mostrar un icono de carga en el campo de entrada que representa los datos del formulario que se están cargando actualmente.
Clase utilizada del estado de carga de entrada de interfaz de usuario semántica:
- loading: esta clase se utiliza para crear un efecto de carga en el elemento de formulario.
Sintaxis:
<div class="ui icon input loading">
...
</div>
Ejemplo 1: en este ejemplo, describiremos el uso del estado de carga de entrada de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Input Loading State </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Input Loading State</h3> <div class="ui left icon input loading"> <input type="text" placeholder="User name"> <i class="user icon"></i> </div> <br><br> <div class="ui left icon input loading"> <input type="password" placeholder="Password"> <i class="eye icon"></i> </div> </div> </body> </html>
Producción:
Estado de carga de entrada de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, describiremos el uso del estado de carga de entrada de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Input Loading State </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Input Loading State</h3> <div class="ui input loading icon focus"> <input type="text" placeholder="User name"> <i class="user icon"></i> </div> <br><br> <div class="ui icon loading input"> <input type="email" placeholder="Email Id"> <i class="search icon"></i> </div> <br><br> <div class="ui icon loading input"> <input type="password" placeholder="Password"> <i class="eye icon"></i> </div> </div> </body> </html>
Producción:
Estado de carga de entrada de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/input.html#loading