0
248
Vistas¿Barra de progreso circular dinámica transparente en JavaScript / CSS como hueco desde adentro o imagen de fondo visible?
Logré la barra de progreso circular con un color de fondo como este:
Pero cuando trato de usar este mismo código pero sin color de fondo, se convierte en PI o rectangular. Quiero lograr así:
Pero lo que tengo es:
Si trato de eliminar el color bg, se convierte en
Busqué mucho pero no pude encontrar ninguna solución.
Aquí está el código que estoy usando para esto.
<!-- Progress bar --> <div class="bar-container"> <div class="circular-progress" style="background: conic-gradient(#FFCAF0 <?php echo $percentage * 3.6; ?>deg, #003866 5deg);"> <div class="value-container"><?php echo $percentage; ?>%</div> </div> </div>Aquí está el código CSS:
.bar-container { background-color: #003866; display: grid; place-items: center; } .circular-progress { position: relative; height: 200px; width: 200px; border-radius: 50%; display: grid; place-items: center; } .circular-progress::before { content: ""; display: block !important; position: absolute; height: 84%; width: 84%; background-color: #003866; border-radius: 50%; } .value-container { position: relative; font-size: 20px; color: #FFCAF0; }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede agregar clip-path para "cortar" el círculo interior.
.bar-container { background-image: url('https://invent.kde.org/plasma/breeze/-/raw/6d4fe7781790c69758be380324262261699894f7/wallpapers/Next/contents/images/1024x768.png'); background-size: fill; background-position: center; background-repeat: no-repeat; display: grid; place-items: center; padding: 20px; } .circular-progress { position: relative; height: 200px; width: 200px; border-radius: 50%; display: grid; place-items: center; background-image: conic-gradient(#FFCAF0 120deg, transparent 5deg); clip-path: path('M20 100 a80 80 0 1 0 160 0 a80 80 0 1 0 -160 0 L0 100 L0 0 L200 0 L200 200 L0 200 L0 100 Z'); } .value-container { position: absolute; top: 100px; width: 100%; text-align: center; font-size: 20px; color: #FFCAF0; } <div class="value-container">33 %</div> <div class="bar-container"> <div class="circular-progress"></div> </div> Puede mover la propiedad de la background-image fuera del CSS para editarla a través de PHP (pero supongo que tendría que usar JavaScript para cambiarla gradualmente).
·
Juan Pablo Isaza
Denunciar
Responde la pregunta