Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. La mejor parte de este marco es que crea diseños hermosos y receptivos, ya que contiene componentes semánticos preconstruidos.
El progreso es un componente importante de nuestro sitio web, ya que muestra el estado de progreso de la acción al usuario. Los componentes de progreso tienen varias propiedades, como una barra de progreso con un valor de texto o una barra de progreso con una etiqueta, etc. Esto se puede lograr con la ayuda del contenido de progreso de la interfaz de usuario semántica.
Contenido de progreso de la interfaz de usuario semántica:
- Barra : Es una barra que muestra visualmente el progreso de una actividad.
- Progreso : una barra puede contener un valor de texto que indica el progreso actual.
- Etiqueta : una barra puede contener una etiqueta además de mostrar su progreso visualmente.
Sintaxis: la sintaxis es la misma para las otras dos clases de contenido de progreso y la única diferencia es el nombre de la clase que cambiará.
<div class="ui .... progress"> <div class="bar"> .... </div> </div>
Ejemplo 1: El siguiente ejemplo demostrará las clases de la barra de contenido de progreso en 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>
<h2 class="header ui green"> GeeksforGeeks </h2>
<h3>Progress Content</h3>
<div class="ui progress" data-percent="40" id="bar">
<div class="bar"></div>
</div>
<script>
$('#bar').progress();
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demostrará las clases de contenido de progreso en 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>
<h2 class="header ui green"> GeeksforGeeks </h2>
<h3>Progress Content</h3>
<div class="ui progress" data-percent="45" id="prog">
<div class="bar">
<div class="progress">
</div>
</div>
</div>
<script>
$('#prog').progress();
</script>
</body>
</html>
Producción:
Ejemplo 3: El siguiente ejemplo demostrará las clases de etiquetas de contenido de progreso en 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>
<h2 class="header ui green"> GeeksforGeeks </h2>
<h3>Progress Content</h3>
<div class="ui progress" data-percent="50" id="bar">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Uploading</div>
</div>
<script>
$('#bar').progress();
</script>
</body>
</html>
Producción:
Enlace de referencia: https://semantic-ui.com/modules/progress.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA