0
254
Views¿Cómo le hago esto a la barra de progreso? (html-css)
¿Cómo hago esto en la barra de progreso como se muestra a continuación?
.detail-load { height: 42px; border: 1px solid #A2B2C5; padding: 1px; border-radius: 10px; } .detail-load > .detail-loading { background: #904BFF; height: 100%; border-radius: 10px; } .detail-load-text { position: absolute; right: 0; left: 0; top: 10px; text-align: center; color: #fff; font-weight: 600; font-size: 17px; } <div class="detail-pop-item"> <div class="detail-load"> <div class="detail-loading" style="width: 80%;"></div> </div> <div class="detail-load-text">80%</div> </div>La barra de progreso que quiero hacer es como la imagen que compartí arriba. ¿Alguien puede ayudar?
3 answers
Answer question0
Puede usar la propiedad clip-path para lograr el resultado deseado. Incluí un javascript ficticio en el fragmento para simular la carga.
Puede configurar --loading-color-primary y --loading-color-secondary en cualquiera de los dos colores que desee.
const front = document.getElementById('progress-front'); const back = document.getElementById('progress-back'); let progress = 0; setInterval(() => { front.style.webkitClipPath = `inset(0 0 0 ${progress}%)`; if(++progress >= 100) { progress = 0; } front.innerHTML = back.innerHTML = progress + "%"; }, 50); :root { --loading-color-primary: purple; --loading-color-secondary: white; } .progress { position: relative; display: flex; font-size: 50px; border: 2px solid var(--loading-color-primary); overflow: hidden; width: 100%; } .back { display: flex; justify-content: center; align-items: center; width: 100%; background: var(--loading-color-primary); color: var(--loading-color-secondary); } .front { position: absolute; display: flex; justify-content: center; align-items: center; left: 0; width: 100%; right: 0; top: 0; bottom: 0; background: var(--loading-color-secondary); color: var(--loading-color-primary); } <div class="progress"> <div class="back" id="progress-back">0%</div> <div class="front" id="progress-front">0%</div> </div>0
Este es un ejemplo de lo que quieres lograr:
https://codepen.io/robinrendle/pen/wKqmbW
<div class="wrapper"> <div class="bg"> <div class="el"></div> </div> </div> $loadingTime: 10s; $color: rgb(255,0,0); body { background-color: white; } @keyframes loading { 0% { width: 0; } 100% { width: 100%; } } @keyframes percentage { @for $i from 1 through 100 { $percentage: $i + "%"; #{$percentage} { content: $percentage; } } } .bg { background-color: $color; animation: loading $loadingTime linear infinite; } .el{ color: $color; width: 200px; border: 1px solid $color; &:after { padding-left: 20px; content: "0%"; display: block; text-align: center; font-size: 50px; padding: 10px 20px; color: rgb(0,255,255); mix-blend-mode: difference; animation: percentage $loadingTime linear infinite; } } html { height: 100%; background-color: white; font-family: 'PT Sans', sans-serif; font-weight: bold; } body { display: flex; align-items: center; justify-content: center; height: 100%; } El elemento clave aquí es la propiedad mix-blend-mode que define cómo el contenido de un elemento debe combinarse con su fondo.
0
Utilicé un enfoque diferente, en el que puede configurar una variable CSS para controlar la duración del progreso de la carga y mostrar el valor.
Debido a que usé una pseudoclase para mostrar el valor, necesitaba usar un truco numérico, usando el restablecimiento del contador en el pseudoelemento ::after .
En cuanto a que el texto oscuro se vuelva blanco, puede usar mix-blend-mode: color-dodge . No es perfecto, como puede ver, pero ¿tal vez lo suficientemente bueno?
.detail-load { height: 42px; border: 1px solid #A2B2C5; padding: 1px; border-radius: 10px; } .detail-load > .detail-loading { background: #904BFF; height: 100%; border-radius: 10px; /* ADDED */ width: calc(var(--progress) * 1%); position: relative; } .detail-load > .detail-loading::after { font-weight: 600; font-size: 17px; /* ADDED */ counter-reset: number-hack var(--progress); content: counter(number-hack)"%"; position: absolute; right: 0px; top: 50%; transform: translate(50%, -50%); color: #d2b6ff; mix-blend-mode: color-dodge; } .detail-load > .detail-loading.grey-text::after { color: #b5b5b5; } <div class="detail-pop-item"> <div class="detail-load"> <div class="detail-loading" style="--progress: 30"></div> </div> </div> <div class="detail-pop-item"> <div class="detail-load"> <div class="grey-text detail-loading" style="--progress: 60"></div> </div> </div>