Fundación CSS
Una barra de progreso se usa para mostrar cuánto ha progresado una tarea, es decir, muestra cuánto de la tarea se ha completado y cuánto queda. Se utiliza principalmente para representar un valor que cambia con el tiempo. El medidor nativo se puede usar para mostrar el valor fluctuante entre los puntos inferior y óptimo, es decir, representa un valor que fluctúa cerca de un valor óptimo.
La diferencia entre <meter> y <progress> es que <progress> denota la finalización general de la tarea durante el cambio en el período de tiempo, mientras que <meter> denota el valor fluctuante cerca del valor óptimo.
Sintaxis:
<meter value="" min="" low="" high="" optimum="" max=""></meter>
Atributos del medidor nativo de la barra de progreso de Foundation CSS:
- max: el límite numérico superior del rango medido. Si se proporciona un valor mínimo (atributo mínimo), este debe ser mayor. El valor máximo es 1 si no se proporciona ningún valor.
- min: el límite numérico inferior del rango medido. Si se proporciona el valor máximo (atributo max), este debe ser menor. El valor mínimo es 0 si no se da ninguno.
- óptimo: El valor numérico ideal está indicado por esta característica. Tiene que estar en el rango aceptable (según lo definido por el atributo mínimo y el atributo máximo). Indica dónde a lo largo del rango se considera ideal cuando se combina con los atributos bajo y alto. Por ejemplo, si el atributo mínimo y el atributo bajo están disponibles, se selecciona el rango más bajo.
- bajo: el límite numérico inferior del extremo inferior del rango medido. Si se proporciona alguno, debe ser mayor que el valor más bajo (atributo mínimo) y menor que los valores alto y máximo (atributo alto y atributo máximo, respectivamente). El valor bajo es igual al valor mínimo si no está definido o es menor que el valor mínimo.
- alto: el límite numérico inferior del extremo superior del rango medido. Si se proporciona alguno, debe ser menor que el valor máximo (atributo máximo) y mayor que el valor bajo y el valor más bajo (atributo bajo y atributo mínimo, respectivamente). Si el valor alto no está definido o es mayor que el valor máximo, el valor alto es igual al valor máximo.
- valor: El valor numérico que está actualmente en uso. Si se definen los valores mínimo y máximo (atributos min y max), este debe estar entre ellos. El valor es 0 si el valor no está definido o es defectuoso. El valor es igual al extremo más cercano del rango si se proporciona pero no está dentro del rango definido por los atributos mínimo y máximo.
Nota : a menos que el valor del atributo de valor esté entre 0 y 1 (ambos inclusive), los atributos mínimo y máximo se deben usar para especificar el rango de modo que el valor del atributo de valor esté contenido dentro de él.
Ejemplo : este ejemplo ilustra la implementación básica de Progress Bar Native Meter en Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous" />
<style>
meter {
width: 100%;
height: 50px;
}
</style>
<title>Foundation CSS Progress Bar Native Meter</title>
</head>
<body style="padding: 30px;">
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h4>Foundation CSS Progress Bar Native Meter</h4>
<br />
</center>
<meter value="19"
min="0"
low="20"
high="70"
optimum="100"
max="100">
</meter>
<br>
<meter value="60"
min="0"
low="25"
high="80"
optimum="100"
max="100">
</meter>
<br>
<meter value="100"
min="0"
low="10"
high="90"
optimum="100"
max="100">
</meter>
</body>
</html>
Producción:
Barra de progreso Medidor nativo
Referencia: https://get.foundation/sites/docs/progress-bar.html#native-meter
Publicación traducida automáticamente
Artículo escrito por isitapol2002 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA