Desarrollo web

Crea gráficos circulares y animaciones de carga o progreso en puro CSS

Crea gráficos circulares y animaciones de carga o progreso en puro CSS

El diseño web ha evolucionado rápidamente en los últimos años, y ahora es posible crear gráficos circulares y animaciones de carga o progreso utilizando solo CSS. En este artículo, descubriremos cómo crear estos efectos visualmente atractivos sin necesidad de utilizar JavaScript ni imágenes adicionales. ¡Prepárate para darle vida a tus páginas web con estas increíbles técnicas de animación en CSS!

Cómo crear gráficos circulares con CSS

Crear gráficos circulares con CSS es una tarea sencilla y efectiva para mostrar datos de manera visualmente atractiva en una página web. A continuación, te explicaré cómo lograrlo.

1. Utilizar la propiedad «border-radius»

La propiedad «border-radius» permite redondear los bordes de un elemento. Para crear un gráfico circular, simplemente establecemos este valor en la mitad del ancho y alto del elemento. Por ejemplo:


.grafico-circular {
width: 200px;
height: 200px;
border-radius: 50%;
}

En este ejemplo, el gráfico circular tendrá un ancho y alto de 200 píxeles, lo que resulta en un círculo perfecto debido a la propiedad «border-radius» establecida en 50%.

2. Utilizar la propiedad «background»

La propiedad «background» permite establecer el color o imagen de fondo de un elemento. Para crear un gráfico circular, podemos utilizar un color de fondo sólido o una imagen que represente los datos que queremos mostrar. Por ejemplo:


.grafico-circular {
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
}

En este ejemplo, el gráfico circular tendrá un fondo de color rojo.

3. Utilizar la propiedad «transform»

La propiedad «transform» permite aplicar transformaciones a un elemento, como rotaciones. Para crear un gráfico circular animado, podemos utilizar esta propiedad para hacer que el gráfico rote de forma continua. Por ejemplo:


.grafico-circular {
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
animation: rotar 2s infinite linear;
}

@keyframes rotar {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

En este ejemplo, el gráfico circular rotará de forma continua durante 2 segundos utilizando la animación definida en «@keyframes».

Crea una barra de progreso circular con CSS

Para crear una barra de progreso circular con CSS, podemos utilizar la propiedad «border-radius» para dar forma redonda al contenedor de la barra de progreso. Además, necesitaremos utilizar las propiedades «border» y «transform» para crear la animación de carga.

Aquí tienes un ejemplo de cómo se puede lograr esto:

1. Primero, creamos un contenedor para la barra de progreso circular utilizando un elemento

con una clase específica. Por ejemplo:

2. A continuación, aplicamos estilos CSS al contenedor para darle forma redonda y establecer el tamaño deseado de la barra de progreso. Por ejemplo:

.progress-bar {
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid #ebebeb; /* color del borde */
}

3. Luego, añadimos una clase adicional al contenedor para animar la barra de progreso. Por ejemplo:

4. Ahora, podemos crear la animación de carga utilizando la propiedad «transform» y una animación CSS. Por ejemplo:

.progress-bar.animate {
animation: progress 2s linear infinite; /* duración y tipo de animación */
}

@keyframes progress {
0% {
transform: rotate(0deg); /* inicio de la animación */
}
100% {
transform: rotate(360deg); /* fin de la animación */
}
}

En este ejemplo, la animación «progress» rota la barra de progreso de 0 a 360 grados en 2 segundos, en un bucle infinito.

Con estos estilos y animaciones CSS, hemos creado una barra de progreso circular. Puedes ajustar los valores de tamaño, color y duración de la animación según tus necesidades.

Recuerda que también puedes personalizar aún más la apariencia de la barra de progreso agregando colores de fondo, sombras, texturas u otros efectos visuales mediante CSS.

Espero que esta explicación te haya sido útil para crear una barra de progreso circular con CSS. Si tienes alguna pregunta adicional, no dudes en hacerla.

Crea una barra de progreso circular con Bootstrap

Si estás buscando cómo crear una barra de progreso circular con Bootstrap, estás en el lugar adecuado. Bootstrap es un framework de código abierto muy popular que facilita el desarrollo de sitios web responsivos y atractivos. A continuación, te mostraré cómo puedes lograr este efecto utilizando Bootstrap.

Para empezar, necesitarás incluir las bibliotecas de Bootstrap en tu proyecto. Puedes hacerlo añadiendo los siguientes enlaces en la sección de encabezado de tu documento HTML:


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-pzjw8f+ua7E4Ktf0lWjb+X4F5O4FgBqDjz5X1p/7Aewhi3L6W5lZ4fJ2f8E8N2X" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-5u8C6zCjL5oVrM14f3gMn6s/Z2y5JNj7sTj6Sb3Zf58ag1iFz8z/2t0cLm5KrhV3" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-pzjw8f+ua7E4Ktf0lWjb+X4F5O4FgBqDjz5X1p/7Aewhi3L6W5lZ4fJ2f8E8N2X" crossorigin="anonymous"></script>

Una vez que hayas incluido las bibliotecas de Bootstrap, puedes utilizar la clase «progress» de Bootstrap para crear una barra de progreso. En este caso, queremos una barra de progreso circular, por lo que también utilizaremos la clase «progress-bar» y la clase «progress-bar-striped» para añadir un efecto de animación. Aquí tienes un ejemplo de cómo se vería el código:


<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

En este ejemplo, hemos establecido el ancho de la barra de progreso en un 75% utilizando la propiedad «style» y los atributos «aria-valuenow», «aria-valuemin» y «aria-valuemax» para indicar el valor actual, el valor mínimo y el valor máximo respectivamente.

Si deseas personalizar aún más tu barra de progreso circular, puedes utilizar las clases y estilos adicionales de Bootstrap. Por ejemplo, puedes cambiar el color de la barra de progreso utilizando la clase «bg-*», donde «*» puede ser reemplazado por el nombre del color que desees utilizar (por ejemplo, «bg-success» para un color verde). También puedes ajustar el tamaño de la barra de progreso utilizando las clases «progress-sm» o «progress-lg» para un tamaño más pequeño o más grande respectivamente.

¡Gracias por utilizar nuestros servicios! Esperamos que hayas disfrutado creando gráficos circulares y animaciones de carga o progreso utilizando solo CSS. ¡Hasta pronto!



Ver más  Cómo dar espacio entre dos elementos en HTML

Artículos recomendados

Deja una respuesta