La barra de progreso es un elemento importante en la web, la barra de progreso se puede usar para descargas, notas obtenidas, unidad de medida de habilidades, etc. Para crear una barra de progreso podemos usar HTML y CSS.
La barra de progreso se utiliza para representar el progreso de una tarea. También se define cuánto trabajo se realiza y cuánto queda para descargar una cosa. No se utiliza para representar el espacio en disco o la consulta relevante.
Ejemplo 1: En este ejemplo, estableceremos el color de la barra de progreso.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to Set Background Color of
Progress Bar using HTML and CSS?
</title>
<style>
/* For Firefox */
progress::-moz-progress-bar {
background: green;
}
/* For Chrome or Safari */
progress::-webkit-progress-value {
background: green;
}
/* For IE10 */
progress {
background: green;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h4>
Set Background Color of Progress
Bar using HTML and CSS
</h4>
<progress value="40" max="100"></progress>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, estableceremos el color y el color de fondo de la barra de progreso.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to Set Background Color of
Progress Bar using HTML and CSS?
</title>
<style>
/* For Chrome or Safari */
progress::-webkit-progress-bar {
background-color: #eeeeee;
}
progress::-webkit-progress-value {
background-color: #039603 !important;
}
/* For Firefox */
progress {
background-color: #eee;
}
progress::-moz-progress-bar {
background-color: #039603 !important;
}
/* For IE10 */
progress {
background-color: #eee;
}
progress {
background-color: #039603;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h4>
Set Background Color of Progress
Bar using HTML and CSS?
</h4>
<progress value="40" max="100"></progress>
</body>
</html>
Producción:
