Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear interfaces interactivas. También se puede usar directamente a través de CDN como bootstrap.
El tipo de cargador de texto de interfaz de usuario semántica se utiliza para crear un elemento de cargador con contenido de texto para una tarea.
Clase usada:
- cargador de texto: esta clase se utiliza para crear un cargador con contenido de texto.
Sintaxis:
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui text loader"> Text... </div>
</div>
</div>
Ejemplo 1: En este ejemplo, crearemos un elemento cargador simple con contenido de texto.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Text Loader Type
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.active.dimmer {
padding: 50px 0;
}
</style>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Text Loader Type</h3>
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui text loader">
GeeksforGeeks Loading...
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, crearemos un cargador simple con elementos de variación invertidos y contenido de texto.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Text Loader Type
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.segment {
padding: 50px 0;
}
</style>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Text Loader Type</h3>
<div class="ui segment">
<div class="ui active inverted dimmer">
<div class="ui text loader">
GeeksforGeeks Loading...
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/loader.html#text-loader
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA