Crear un nivel/medidor de tanque dinámico usando html y css

No dudes en divulgar nuestra web y códigos con otro, necesitamos de tu ayuda para ampliar esta comunidad.

Solución:

Si solo necesita llenar el tanque, puede usar una estructura mucho más simple para construir el tanque con dos elementos HTML, border-radius y un pseudo elemento.

Luego puede usar JS para cambiar la altura del área verde de acuerdo con el valor ingresado en los datos personalizados attribute data-amount del .tk división:

MANIFESTACIÓN (cambiar el valor de los datos personalizados attribute data-amount en el .tk div para cambiar la altura del líquido).

var amount = $('.tk').attr('data-amount'),
    height = amount * 80/100 + 20;

$('.lq').css(height : height + '%');

.tk /*Liquid Section*/
    position:relative;
    width:40%; 
    height:130px;
    padding-top:50px;
    margin: 0 auto;
    background:rgba(56,56,56,0.8);
    border-radius: 100%/40px;
    border-bottom:3px solid #000;
    text-align:center;
    z-index:1;
    overflow:hidden;


.tk:after, .lq
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%;
    height:20%;
    z-index:-1;

.lq
    background:rgba(128,128,128,0.99);
    height:80%;
    top:-2px;
    border-radius:100%/40px;
    border-bottom:3px solid #000;

.tk:after
    height:20%;
    border:1px solid #000;
    border-radius:100%; /*makes circle at top*/

    40%
    

Si entiendes que te ha resultado de provecho este artículo, te agradeceríamos que lo compartas con más juniors de este modo nos ayudas a dar difusión a nuestro contenido.

---

---

Utiliza Nuestro Buscador