Tutorial Blogger #28 | Barra de Progreso Animada #2

Barras de Progresos parte #2

¡Que tal mundo!!

En el tutorial anterior que pueden ver AQUI, explique como añadir barras de progreso a nuestras lecturas. Estas barras me han sido de mucha utilidad a medida que e ido utilizando el blog, y para que ustedes puedan ver mi proceso, ya sea en proyectos de lectura como en web. No quiero presumir y posiblemente sea una tontería, pero como estoy muy contenta con mis clases de desarrollo web, quiero implementar algunas de las cosas que e aprendido y compartirla con ustedes, pero tampoco crean que ya soy una profesional, tengo mucho camino aun por recorrer. Para este proyecto quería crear una barra de progreso animada lo mas parecida a las barras de Bootstrap pues me gusta mucho la implementación que ellos usa pero, resulta y acontece que la plantilla que utilizo para este blog realmente me limita demasiado el diseño... Sin mas alternativa que irme por el camino largo. Uimax tiene unos proyectos en codepen muy interesantes por lo que tome nota de ellos para practicar e implementarlo en el blog. Ahora vamos con el paso a paso: NOTA: estas barras es tan pensadas para el Sidebar de nuestro blog, pero aun así lo podrías editar y añadirlo a tus proyectos dentro del blog 1. Vamos a nuestro tema --⪘Personalizar --⪘Editar HTML Una vez dentro de nuestro código HTML CTRL+F 2. En el buscador buscaremos </head> Sobre el código ya mencionado, debemos añadir la siguiente linea de estilos CSS. código:

   
<!-- hoja de estilos para progressbar -->
<link href='https://cdn.jsdelivr.net/gh/KarenCuliolis/Bilioteca@main/styles.css' rel='stylesheet'/>
<!-- fin -->

Esta es una hoja de estilos ya predeterminada. Mi objetivo con esto es no recargar tanto nuestro blog con código pues al final, esto solo ralentiza la carga de nuestra pagina, es por ello que he creado un CDN. Cabe recalcar que los colores de las barras ya estan predeterminados. 3. Guardamos y salimos del editor HTML. 4. Ahora te toca escoger alguna de las opciones que les estoy dando y un extra que estoy añadiendo. pd: Las opciones de barras ya están predeterminada con el código hay algunas cositas que en el siguiente paso esta explicando sobre el codigo. Opción N°1 ◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Reto Literario

100/100 libros leidos

100%


<div class="demo-preview">
<h3>Reto Literario</h3>
<p>100/100 libros leidos</p>
<div class="progress progress-striped active">
<div role="progressbar progress-striped" style="width: 100%;" class="progress-bar"><span>100%</span></div>
</div>
</div>

Opción N°2 ◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Reto Literario

90%

90/100 libros leidos


<div class="demo-preview">
<h3>Reto Literario</h3>
<div class="progress progress-striped active">
<div role="progressbar " style="width: 90%;" class="progress-bar progress-bar-secondary"><span>90%</span></div>
</div><p>90/100 libros leídos</p>
</div>

Opción N°3 ◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Reto Literario 2023

80%


<div class="demo-preview">
<h3>Reto Literario 2023</h3>
<div class="progress progress-striped active">
<div role="progressbar " style="width: 80%;" class="progress-bar progress-bar-default"><span>80%</span></div>
</div>
</div>

Opción N°4 ◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Libros leidos

70%

Reto 2023 Literatura


<div class="demo-preview">
<p>Libros leidos</p>
<div class="progress progress-striped active">
<div role="progressbar " style="width: 70%;" class="progress-bar progress-bar-success"><span>70%</span></div>
</div>
<h3>Reto 2023 Literatura</h3>
</div>

Opción N°5 ◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Leyendo:

Ciudad media luna

60%


<div class="demo-preview">
<p>Leyendo:</p><h3>Ciudad media luna</h3>
<div class="progress progress-striped active">
<div role="progressbar " style="width: 60%;" class="progress-bar progress-bar-info"><span>60%</span></div>
</div>
</div>

Opción N°6 ◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Club de Lectura

50%

Progreso del grupo


<div class="demo-preview">
<div class="progress progress-striped active">
<div role="progressbar " style="width: 50%;" class="progress-bar progress-bar-warning"><span>50%</span></div>
</div>
</div>

Opción N°7 ◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Leyendo

40%.


<div class="demo-preview">
<div class="progress progress-striped active">
<div role="progressbar" style="width: 40%;" class="progress-bar progress-bar-danger"><span>40%.</span></div>
</div>
</div>

5. Cuando ya tengas escogida la barrita de progreso ve a la sección de Gadget --⪘ HTML --⪘ Pegamos --⪘ Guardamos. Y listo, ahora disfruta.

Extra ◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Leyendo:

20%

<!--Div independiente | margin-top,widht, align-items: se puede editar margenes, altura y ancho de la barra o añadir mas estilo dentro de style -->
<div style="margin-top: 10px; margin: auto; width: 30%;align-items: center;">
<!-- Text-align ubica el texto en el centro -->
<h3 style="text-align: center;">Leyendo:</h3> <!-- se puede modificar el text blanco de esta linea -->
<div class="progress progress-striped active"><!--No modifica -->
<div class="progress-bar progress-bar-danger" role="progressbar" style="background-color: goldenrod; color: aliceblue; text-align: center; width: 50%;">
<!-- wight:50%, es para ir indicando el procentaje de progreso | background-color: color de barra | text-align: coloca el texto dentro de la barra al centro -->
<span>20%</span><!-- texto que se muestra  dentro de la barra -->
</div>
</div>
<br />
<!-- area de imagen -->
<img alt="Ciuda Media Luna" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1645024676l/59764791._SX318_.jpg" style="width: 250px;align-items: center;" /> 
<!-- src: pegar url de imagen dentro de "URL" comillas | width: tamaño de la imagen | align-items: para colocar img en el centro -->
</div>

Explicando el código. IMPORTANTE: Estas son algunas cosas que debes de saber.

1. El código esta predeterminado para que ocupe el 100% de tu html (ósea tu pagina web o post o Gadget).
2. Como ya tiene una hoja de estilos asignada, esto no quiere decir que no puedas cambiar el color o tamaño ect de la barra de progreso.
3. En caso de que quieras modificar el código, en el extra están las explicaciones (dentro de la caja) en los comentarios, sobre cuales cosas puedes modificar o añadir.

La Opción Extra es libre de modificar a tu gusto, tal como te estoy indicando en los comentarios dentro del código (Html), solo no te olvides de añadir el link que te indique en el 2do paso dentro de HEAD. Si te interesa el código puedes ver mas detalles del Css en mi pagina de Codepen.PD: Si tienes dudas o necesitas ayuda solo deja un comentario, estaré pendiente para responderlos todos.

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈ Esto seria todo. Muchas Gracias por leer me, No olviden: comentar, seguir el blog y compartir !!Besitos¡¡ Kc...

¿Te gusta lo que hago? Me ayudas í