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.
La variación del centro en línea del cargador de interfaz de usuario semántica se utiliza para colocar el cargador en el centro en línea.
Clase usada:
- centrado en línea: esta clase se utiliza para colocar el cargador en el centro en línea.
Sintaxis:
<div class="ui active centered inline loader"></div>
Ejemplo 1: En este ejemplo, describiremos las variaciones del centro en línea del cargador.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Inline Center Variations
</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 Loader Inline Center Variations</h3>
</div>
<div class="ui container">
<div class="ui segment">
<div class="ui active inline centered loader"></div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, describiremos las variaciones del centro en línea del cargador.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Loader Inline Center Variations
</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 Loader Inline Center Variations</h3>
</div>
<div class="ui container">
<div class="ui segment">
<div class="ui active inline center dimmer">
<div class="ui text loader">
GeeksforGeeks Loading...
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/loader.html#inline-center
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA