Una barra de progreso se utiliza para mostrar el progreso de un proceso en una computadora. Una barra de progreso muestra cuánto del proceso se completó y cuánto queda. Entonces, hoy diseñaremos una barra de progreso circular usando HTML y CSS. Al usar HTML, diseñaremos los diferentes componentes para esa barra de progreso y luego, al usar las propiedades de CSS, podemos diseñar la barra de progreso.
Se proporciona una imagen de muestra para comprender la tarea de hoy con más claridad.
Implementación paso a paso:
Paso 1: Primero, diseñaremos una estructura de barra de progreso básica usando HTML. Primero, crearemos un contenedor div que contenga ambas barras de progreso. Después de eso, crearemos otro div dentro del contenedor div que crea el elemento div circular. Aquí hemos agregado algunos comentarios que ayudarán a los lectores a comprender fácilmente.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <!-- Set title of web page --> <title>GFG Circular progress Bar</title> </head> <body> <!-- Added heading of the page --> <h1>GeeksForGeeks Circular Progress Bars</h1> <!-- Creating a container class that hold other useful classes --> <div class="container"> <!-- Creating a ui-widgets classes that store other useful classes like ui-values and ui-labels --> <div class="ui-widgets"> <div class="ui-values">85%</div> <div class="ui-labels">Java</div> </div> <div class="ui-widgets"> <div class="ui-values">50%</div> <div class="ui-labels">HTML</div> </div> </div> </body> </html>
Paso 2: A continuación, usaremos algunas propiedades de CSS para diseñar la barra de progreso. La clase contenedora establece la posición del elemento div. Se utilizan otras clases de CSS para crear la barra de progreso circular y estilos CSS agregados.
CSS
/* Apply css properties to h1 element */
h1{
text-align: center;
}
/* Create a container using css properties */
.container {
top: 30%;
left:50%;
position: absolute;
text-align: center;
transform: translate(-50%, -50%);
}
/* Apply css properties to ui-widgets class */
.ui-widgets {
position: relative;
display: inline-block;
width: 10rem;
height: 10rem;
border-radius: 9rem;
margin:1.5rem;
border: 1.2rem solid palegreen;
box-shadow: inset 0 0 7px grey;
border-left-color: palegreen;
border-top-color:chartreuse ;
border-right-color: darkgreen;
border-bottom-color: white ;
text-align: center;
box-sizing: border-box;
}
/* Apply css properties to the second
child of ui-widgets class */
.ui-widgets:nth-child(2) {
border-top-color:chartreuse ;
border-right-color: white;
border-left-color: palegreen;
border-bottom-color: white;
}
/* Apply css properties to ui-widgets
class and ui-values class */
.ui-widgets .ui-values {
top: 40px;
position: absolute;
left: 10px;
right: 0;
font-weight: 700;
font-size: 2.0rem;
}
/* Apply css properties to ui-widgets
class and ui-labels class */
.ui-widgets .ui-labels {
left: 0;
bottom: -16px;
text-shadow: 0 0 4px grey;
color:black;
position: absolute;
width: 100%;
font-size: 16px;
}
Código completo: en esta sección, combinaremos las dos secciones anteriores para crear una barra de progreso circular usando HTML y CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- Set title of web page -->
<title>GFG Circular progress Bar</title>
<style>
/* Apply css properties to h1 element */
h1 {
text-align: center;
}
/* Create a container using CSS properties */
.container {
top: 30%;
left: 50%;
position: absolute;
text-align: center;
transform: translate(-50%, -50%);
}
/* Apply CSS properties to ui-widgets class */
.ui-widgets {
position: relative;
display: inline-block;
width: 10rem;
height: 10rem;
border-radius: 9rem;
margin: 1.5rem;
border: 1.2rem solid palegreen;
box-shadow: inset 0 0 7px grey;
border-left-color: palegreen;
border-top-color: chartreuse;
border-right-color: darkgreen;
border-bottom-color: white;
text-align: center;
box-sizing: border-box;
}
/* Apply css properties to the second
child of ui-widgets class */
.ui-widgets:nth-child(2) {
border-top-color: chartreuse;
border-right-color: white;
border-left-color: palegreen;
border-bottom-color: white;
}
/* Apply css properties to ui-widgets class
and ui-values class*/
.ui-widgets .ui-values {
top: 40px;
position: absolute;
left: 10px;
right: 0;
font-weight: 700;
font-size: 2.0rem;
}
/* Apply css properties to ui-widgets
class and ui-labels class*/
.ui-widgets .ui-labels {
left: 0;
bottom: -16px;
text-shadow: 0 0 4px grey;
color: black;
position: absolute;
width: 100%;
font-size: 16px;
}
</style>
</head>
<body>
<!-- Add heading of the page -->
<h1>GeeksforGeeks Circular Progress Bar</h1>
<!-- Creating of a container class that
store other useful classes -->
<div class="container">
<!-- Creating a ui-widgets classes that
store other useful classes like
ui-values and ui-labels -->
<div class="ui-widgets">
<div class="ui-values">85%</div>
<div class="ui-labels">Java</div>
</div>
<div class="ui-widgets">
<div class="ui-values">50%</div>
<div class="ui-labels">HTML</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por riyamathur y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA