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 buena interfaz y con diferentes clases sorprendentes. En este artículo, veamos el estado de error de progreso. Un estado de error representa una salida diferente, distinta del estado deseado o esperado.
Clase de estado de error de progreso de IU semántica:
- error: Indica la condición no deseada notificada con un mensaje de alerta.
Sintaxis:
<div class="ui progress error">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Error</div>
</div>
Ejemplo: El siguiente código muestra la barra de progreso del estado de error .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Progress Error 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 Error State
</strong><br />
</center>
<div class="ui container">
<div class="ui progress error "
data-value="10"
data-total="10"
id='eg'>
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Network Error!</div>
</div>
</div>
<script>
$('#eg').progress();
</script>
</body>
</html>
Producción:
Ejemplo 2: el código siguiente muestra la barra de progreso del estado de error .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Progress Error 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 Error State
</strong>
<br />
</center>
<div class="ui container">
<div class="ui progress error" id='eg'>
<div class="bar">
<div class="progress">2%</div>
</div>
<div class="label">
Error: Ran out of Space, can't download!
</div>
</div>
</div>
<script>
$('#eg').progress()
</script>
</body>
</html>
Salida :
Referencia : https://semantic-ui.com/modules/progress.html#error
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA