El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
El icono de interfaz de usuario semántica es un glifo que se utiliza para mostrar otra cosa en lugar de texto para ahorrar espacio y tiempo. Los iconos se utilizan para ayudar a los usuarios a navegar y tienen el mismo significado en todos los idiomas y, por lo tanto, muchos elementos no necesitan estar escritos en diferentes idiomas.
El estado de carga del icono de la interfaz de usuario semántica se puede utilizar para convertir el icono en un cargador simple. El ícono rotará como un indicador de carga.
Clases de estado de carga de iconos de interfaz de usuario semántica:
- cargando: Al agregar esta clase, el ícono comenzará a girar, pareciendo que se está cargando.
Sintaxis: agregue la clase de carga que hará que el ícono sea un cargador simple de la siguiente manera:
<i class="loading icon">
...
</i>
Ejemplo: El siguiente ejemplo ilustra el estado de carga de los iconos de la interfaz de usuario semántica . En este ejemplo, hemos convertido el ícono en un cargador simple al agregar la clase de carga .
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<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>
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong>
Semantic UI Icon Link Variation
</strong>
<div class="ui segment">
<i class="loading globe huge icon"></i>
</div>
</center>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#loading
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA