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 la interfaz de usuario semántica, las barras de progreso vienen con una mejor interfaz de usuario, junto con diferentes clases increíbles. El estado de éxito representa la finalización de la tarea específica.
Clase de estado de éxito de progreso de IU semántica:
- éxito: Indica que el trabajo se realizó con éxito con una indicación verde.
Sintaxis:
<div class="ui success progress">
<div class="bar">
<div class="progress"></div>
</div>
</div>
Ejemplo 1: El siguiente ejemplo muestra la barra de progreso del estado de éxito en Semantic-UI.
HTML
<!DOCTYPE html>
<html>
<head>
<titleSemantic-UI Progress Success State</title>>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<strong>
Semantic-UI Progress Success State
</strong>
<br />
</center>
<div class="ui container">
<div class="ui success progress"
data-value="10"
data-total="10" id="eg">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Successfully Transferred!</div>
</div>
</div>
<script>
$('#eg').progress();
</script>
</body>
</html>
Producción:
Estado de éxito del progreso de la interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo demuestra la barra de progreso del estado de éxito con algo de jquery.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Progress Success State</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<strong>
Semantic-UI Progress Success State
</strong>
<br />
</center>
<div class="ui container">
<div class="ui indicating progress"
data-value="1"
data-total="1"
id="eg">
<div class="bar"></div>
<div class="label">Downloading</div>
</div>
<div class="ui button">Download</div>
</div>
<script>
$('.ui.button').on('click', function() {
$('#eg').progress({
text: {
success: 'Download Successful!'
}
});
});
</script>
</body>
</html>
Producción:
Referencia : https://semantic-ui.com/modules/progress.html#success
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA