La interfaz de usuario semántica es un marco de interfaz de usuario basado en menos y jQuery . Se utiliza para hacer sitios web hermosos y receptivos. En este artículo, veremos el conjunto de iconos Spinners proporcionado por Semantic UI. Hay un total de 15 íconos en el conjunto de íconos Spinners que se pueden usar para decirle al usuario que algo se está cargando en segundo plano.
Conjunto de iconos de interfaz de usuario semántica Clases de hilanderos:
- asterisco: esta clase se utiliza para mostrar el icono de asterisco.
- certificado: esta clase se utiliza para mostrar el icono del certificado.
- muesca circular: estas clases se utilizan para mostrar el icono de círculo con muesca.
- cog: esta clase se utiliza para mostrar el icono de cog.
- compass: esta clase se utiliza para mostrar el icono de la brújula.
- contorno de brújula: estas clases se utilizan para mostrar el icono de brújula delineado.
- crosshairs: esta clase se utiliza para mostrar el icono de la cruz.
- salvavidas: estas clases se utilizan para mostrar el icono del salvavidas.
- contorno del salvavidas: estas clases se utilizan para mostrar el icono del salvavidas delineado.
- copo de nieve: esta clase se utiliza para mostrar el icono del copo de nieve.
- contorno de copo de nieve: estas clases se utilizan para mostrar el icono de copo de nieve delineado.
- spinner: esta clase se utiliza para mostrar el icono de la ruleta.
- sol: esta clase se utiliza para mostrar el icono del sol.
- contorno del sol: estas clases se utilizan para mostrar el icono del sol delineado.
- sincronización: esta clase se utiliza para mostrar el icono de sincronización.
Sintaxis:
<i class="icon asterisk"></i>
Ejemplo 1: El siguiente ejemplo ilustra el uso de los 15 íconos enumerados anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Icon Set Spinners</title>
<!-- Scripts and CSS -->
<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>
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h4>Semantic UI - Icon Set Spinners</h4>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon big asterisk"></i>
</div>
<div class="four wide column">
<i class="icon big certificate"></i>
</div>
<div class="four wide column">
<i class="icon big circle notch"></i>
</div>
<div class="four wide column">
<i class="icon big cog"></i>
</div>
<div class="four wide column">
<i class="icon big compass"></i>
</div>
<div class="four wide column">
<i class="icon big compass outline"></i>
</div>
<div class="four wide column">
<i class="icon big crosshairs"></i>
</div>
<div class="four wide column">
<i class="icon big life ring"></i>
</div>
<div class="four wide column">
<i class="icon big life ring outline"></i>
</div>
<div class="four wide column">
<i class="icon big snowflake"></i>
</div>
<div class="four wide column">
<i class="icon big snowflake outline"></i>
</div>
<div class="four wide column">
<i class="icon big spinner"></i>
</div>
<div class="four wide column">
<i class="icon big sun"></i>
</div>
<div class="four wide column">
<i class="icon big sun outline"></i>
</div>
<div class="four wide column">
<i class="icon big sync"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Interfaz de usuario semántica: conjunto de iconos giratorios
Ejemplo 2: El siguiente ejemplo muestra el uso de íconos de Conjunto de Spinners con diferentes colores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Icon Set Spinners</title>
<!-- Scripts and CSS -->
<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>
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h4>Semantic UI - Icon Set Spinners
with Colors Variation</h4>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon red big asterisk"></i>
</div>
<div class="four wide column">
<i class="icon yellow big certificate"></i>
</div>
<div class="four wide column">
<i class="icon orange big circle notch"></i>
</div>
<div class="four wide column">
<i class="icon olive big cog"></i>
</div>
<div class="four wide column">
<i class="icon green big compass"></i>
</div>
<div class="four wide column">
<i class="icon teal big compass outline"></i>
</div>
<div class="four wide column">
<i class="icon blue big crosshairs"></i>
</div>
<div class="four wide column">
<i class="icon violet big life ring"></i>
</div>
<div class="four wide column">
<i class="icon purple big life ring outline"></i>
</div>
<div class="four wide column">
<i class="icon pink big snowflake"></i>
</div>
<div class="four wide column">
<i class="icon brown big snowflake outline"></i>
</div>
<div class="four wide column">
<i class="icon grey big spinner"></i>
</div>
<div class="four wide column">
<i class="icon violet big sun"></i>
</div>
<div class="four wide column">
<i class="icon blue big sun outline"></i>
</div>
<div class="four wide column">
<i class="icon big sync"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Interfaz de usuario semántica: conjunto de iconos giratorios con variación de colores
Ejemplo 3: El siguiente ejemplo muestra el uso de íconos de conjunto de Spinners con variación de tamaño.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Icon Set Spinners</title>
<!-- Scripts and CSS -->
<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>
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h4>Semantic UI - Icon Set Spinners
with Sizes Variation</h4>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon small asterisk"></i>
</div>
<div class="four wide column">
<i class="icon small certificate"></i>
</div>
<div class="four wide column">
<i class="icon small circle notch"></i>
</div>
<div class="four wide column">
<i class="icon cog"></i>
</div>
<div class="four wide column">
<i class="icon compass"></i>
</div>
<div class="four wide column">
<i class="icon compass outline"></i>
</div>
<div class="four wide column">
<i class="icon large crosshairs"></i>
</div>
<div class="four wide column">
<i class="icon large life ring"></i>
</div>
<div class="four wide column">
<i class="icon large life ring outline"></i>
</div>
<div class="four wide column">
<i class="icon big snowflake"></i>
</div>
<div class="four wide column">
<i class="icon big snowflake outline"></i>
</div>
<div class="four wide column">
<i class="icon big spinner"></i>
</div>
<div class="four wide column">
<i class="icon huge sun"></i>
</div>
<div class="four wide column">
<i class="icon huge sun outline"></i>
</div>
<div class="four wide column">
<i class="icon huge sync"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Interfaz de usuario semántica: conjunto de iconos giratorios con variación de tamaños
Referencia: https://semantic-ui.com/elements/icon.html#spinners
Publicación traducida automáticamente
Artículo escrito por prashantrathore1159 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA