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 las interfaces. También se puede usar directamente a través de CDN como bootstrap. Las barras de progreso indican el progreso del trabajo realizado del trabajo total. Indica visualmente la cantidad de trabajo realizado con las barras. En este artículo, aprenderemos sobre el contenido de la barra de progreso. Crea el elemento de progreso que puede contener una barra de progreso visualmente.
Clase de contenido de la barra de progreso de la interfaz de usuario semántica:
- bar: Esta clase se utiliza para crear una barra de progreso del elemento.
Sintaxis:
<div class="ui progress">
<div class="bar"></div>
</div>
Ejemplo 1: en este ejemplo, describiremos el contenido de la barra de progreso de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Progress Bar Content
</title>
<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>
</head>
<body>
<div class="ui container center aligned">
<h2 class="header ui green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Progress Bar Content</h3>
<div class="ui progress"
data-percent="60"
id="eg">
<div class="bar"></div>
<div class="label">Transferring files</div>
</div>
</div>
<script>
$('#eg').progress();
</script>
</body>
</html>
Producción:
Contenido de la barra de progreso de la interfaz de usuario semántica
Ejemplo 2: en este ejemplo, describiremos el contenido de la barra de progreso de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Progress Bar Content
</title>
<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>
</head>
<body>
<div class="ui container center aligned">
<h2 class="header ui green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Progress Bar Content</h3>
<div class="ui green progress"
data-percent="70"
id="eg">
<div class="bar"></div>
<div class="label">Transferring files</div>
</div>
</div>
<script>
$('#eg').progress();
</script>
</body>
</html>
Producción:
Contenido de la barra de progreso de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/progress.html#bar
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA