Creating a dynamic tank level / meter using html and css

Question

I am currently having problems creating a “reservoir measurement system” as part of my project. I use MVC and using the following markup, I achieved this:

using:

#container { position:absolute; margin:0; margin-top:-50px; width:100%; padding:0; -moz-perspective: 1000px; /*required to make cylinder shape*/ -webkit-perspective: 1000px; } #frame { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; margin-left:5%; -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(40%, 60px, 175px); -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(40%, 60px, 175px); } .strip { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d } .strip div { position: fixed; background-repeat:repeat; border-width: thin 10px; color:#ececec; vertical-align:central; height:130px; /*height and width of tank display*/ width:12%; background-color:rgba(128,128,128,0.99); -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; -webkit-box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96); -moz-box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96); box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96); } .strip div:before { content:""; position: absolute; z-index: -1; /*Make this lower so any text appears in front*/ top: 0; right: 0; bottom: 50%; /*used for tank level setting*/ left: 0; background: rgba(56,56,56,0.8); } .strip .a { border-top:1px solid black; -moz-transform: rotateY(0deg) translateZ(124px); -webkit-transform: rotateY(0deg) translateZ(124px) } .strip .b { border-top:1px solid black; -moz-transform: rotateY(15deg) translateZ(124px); -webkit-transform: rotateY(15deg) translateZ(124px) } .strip .c { border-top:1px solid black; -moz-transform: rotateY(30deg) translateZ(124px); -webkit-transform: rotateY(30deg) translateZ(124px); } .strip .c { background: rgb(0,0,0) !important; /* Old browsers */ background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(128,128,128,1) 1%, rgba(128,128,128,1) 9%, rgba(0,0,0,1) 10%, rgba(128,128,128,1) 11%, rgba(128,128,128,1) 19%, rgba(0,0,0,1) 20%, rgba(128,128,128,1) 21%, rgba(128,128,128,1) 29%, rgba(0,0,0,1) 30%, rgba(128,128,128,1) 31%, rgba(128,128,128,1) 39%, rgba(0,0,0,1) 40%, rgba(128,128,128,1) 41%, rgba(128,128,128,1) 49%, rgba(0,0,0,1) 50%, rgba(128,128,128,1) 51%, rgba(128,128,128,1) 59%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 60%, rgba(128,128,128,1) 61%, rgba(128,128,128,1) 69%, rgba(0,0,0,1) 70%, rgba(128,128,128,1) 71%, rgba(128,128,128,1) 79%, rgba(0,0,0,1) 80%, rgba(128,128,128,1) 81%, rgba(128,128,128,1) 89%, rgba(0,0,0,1) 90%, rgba(128,128,128,1) 91%, rgba(128,128,128,1) 99%, rgba(0,0,0,1) 100%)!important; /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(1%,rgba(128,128,128,1)), color-stop(9%,rgba(128,128,128,1)), color-stop(10%,rgba(0,0,0,1)), color-stop(11%,rgba(128,128,128,1)), color-stop(19%,rgba(128,128,128,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(21%,rgba(128,128,128,1)), color-stop(29%,rgba(128,128,128,1)), color-stop(30%,rgba(0,0,0,1)), color-stop(31%,rgba(128,128,128,1)), color-stop(39%,rgba(128,128,128,1)), color-stop(40%,rgba(0,0,0,1)), color-stop(41%,rgba(128,128,128,1)), color-stop(49%,rgba(128,128,128,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(51%,rgba(128,128,128,1)), color-stop(59%,rgba(128,128,128,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(61%,rgba(128,128,128,1)), color-stop(69%,rgba(128,128,128,1)), color-stop(70%,rgba(0,0,0,1)), color-stop(71%,rgba(128,128,128,1)), color-stop(79%,rgba(128,128,128,1)), color-stop(80%,rgba(0,0,0,1)), color-stop(81%,rgba(128,128,128,1)), color-stop(89%,rgba(128,128,128,1)), color-stop(90%,rgba(0,0,0,1)), color-stop(91%,rgba(128,128,128,1)), color-stop(99%,rgba(128,128,128,1)), color-stop(100%,rgba(0,0,0,1)))!important; /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } .strip .d { border-top:1px solid black; -moz-transform: rotateY(45deg) translateZ(124px); -webkit-transform: rotateY(45deg) translateZ(124px) } .strip .e { border-top:1px solid black; -moz-transform: rotateY(60deg) translateZ(124px); -webkit-transform: rotateY(60deg) translateZ(124px) } .strip .f { border-top:1px solid black; -moz-transform: rotateY(75deg) translateZ(124px); -webkit-transform: rotateY(75deg) translateZ(124px) } .strip .g { border-top:1px solid black; -moz-transform: rotateY(90deg) translateZ(124px); -webkit-transform: rotateY(90deg) translateZ(124px) } .strip .h { border-top:1px solid black; -moz-transform: rotateY(105deg) translateZ(124px); -webkit-transform: rotateY(105deg) translateZ(124px) } .strip .i { border-top:1px solid black; -moz-transform: rotateY(120deg) translateZ(124px); -webkit-transform: rotateY(120deg) translateZ(124px) } .strip .j { border-top:1px solid black; -moz-transform: rotateY(135deg) translateZ(124px); -webkit-transform: rotateY(135deg) translateZ(124px) } .strip .k { border-top:1px solid black; -moz-transform: rotateY(150deg) translateZ(124px); -webkit-transform: rotateY(150deg) translateZ(124px) } .strip .l { border-top:1px solid black; -moz-transform: rotateY(165deg) translateZ(124px); -webkit-transform: rotateY(165deg) translateZ(124px) } .strip .m { border-top:1px solid black; -moz-transform: rotateY(180deg) translateZ(124px); -webkit-transform: rotateY(180deg) translateZ(124px) } .strip .n { border-top:1px solid black; -moz-transform: rotateY(195deg) translateZ(124px); -webkit-transform: rotateY(195deg) translateZ(124px) } .strip .o { border-top:1px solid black; -moz-transform: rotateY(210deg) translateZ(124px); -webkit-transform: rotateY(210deg) translateZ(124px) } .strip .p { border-top:1px solid black; -moz-transform: rotateY(225deg) translateZ(124px); -webkit-transform: rotateY(225deg) translateZ(124px) } .strip .q { border-top:1px solid black; -moz-transform: rotateY(240deg) translateZ(124px); -webkit-transform: rotateY(240deg) translateZ(124px) } .strip .r { border-top:1px solid black; -moz-transform: rotateY(255deg) translateZ(124px); -webkit-transform: rotateY(255deg) translateZ(124px) } .strip .s { border-top:1px solid black; -moz-transform: rotateY(270deg) translateZ(124px); -webkit-transform: rotateY(270deg) translateZ(124px) } .strip .t { border-top:1px solid black; -moz-transform: rotateY(285deg) translateZ(124px); -webkit-transform: rotateY(285deg) translateZ(124px) } .strip .u { border-top:1px solid black; -moz-transform: rotateY(300deg) translateZ(124px); -webkit-transform: rotateY(300deg) translateZ(124px) } .strip .v { border-top:1px solid black; -moz-transform: rotateY(315deg) translateZ(124px); -webkit-transform: rotateY(315deg) translateZ(124px) } .strip .w { border-top:1px solid black; -moz-transform: rotateY(330deg) translateZ(124px); -webkit-transform: rotateY(330deg) translateZ(124px) } .strip .x { border-top:1px solid black; -moz-transform: rotateY(345deg) translateZ(124px); -webkit-transform: rotateY(345deg) translateZ(124px); } 

 <div class="tankWidget"> <div class="banner">Tank 1: Kero</div> <div id="container"> <div id="frame"> <div class="strip"> <div id="tank1FrameA"class="a">50%</div> <div class="b"></div> <div class="c"></div> <div class="d"></div> <div class="e"></div> <div class="f"></div> <div class="g"></div> <div class="h"></div> <div class="i"></div> <div class="j"></div> <div class="k"></div> <div class="l"></div> <div class="m"></div> <div class="n"></div> <div class="o"></div> <div class="p"></div> <div class="q"></div> <div class="r"></div> <div class="s"></div> <div class="t"></div> <div class="u"></div> <div class="v"></div> <div class="w"></div> <div class="x"></div> </div> </div> </div> <div class="widget-footer"> <table id="specTab1"> <tr><th>Volume</th><th>Capacity</th><th>Ullage (AL)</th></tr> <tr id="tank1"><td id="tank1Vol">50L</td><td>100L</td><td>1.24</td></tr> </table> <br /> <div class="lowerWidget-footer"> <br /> Details </div> </div> </div> 

However, now I want to make it dynamic. (that is, the light gray level changes depending on the value in the ".a" band (in this case, 50%).

I used:

  var test = $('#tank1FrameA').text(); //gets value of first tank test = parseInt(test); 

to extract 50 .

However, since I cannot target the :before pseudo-element to edit the "height / level", how else can I achieve this alignment / dynamics ability?

Generally,

 +-------------+ | 50% | <-- value to use | | +-------------+ <-- this level should change | | | | +-------------+ 

25%:

 +-------------+ | 25% | <-- value to use | | | | +-------------+ <-- this level should change | | +-------------+ 

etc.

Any suggestions on how to do this with this cylinder shape?

Here is the executable / editable jsfiddle.

---

Upon initial creation

Tank, I was looking for editing:

 .strip div:before { 

bottom attribute to achieve this.

However, I recently discovered that pseudo-elements are not part of the DOM and therefore inaccessible to jQuery (as much as possible).

Answer 1

If you just need to fill the tank, you can use a much simpler way to build a tank with two HTML elements, a border radius and a pseudo-element.

Then you can use JS to change the height of the green zone according to the value entered in the user data attribute data-amount of the .tk section:

DEMO (change the value of the user attribute data-amount in the .tk div to change the height of the liquid).

 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*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="tk" data-amount="40"> 40% <div class="lq"></div> </div> 

Answer 2

Although @ web-tiki's answer is pretty good and accepted, I thought I should add another option for simple use cases.

The following may not have been available or widespread at the time of the question, as it includes the HTMl5 </meter>

If the pseudo-3d effect is optional, you can use the not-so-well-known HTML5 <meter> element . I have used this from time to time in the past.

basic syntax:

 <meter id="fuel" name="fuel-so-so" min="0" max="100" low="33" high="66" optimum="80" value="50"> at 50/100 </mete 

It is mainly intended for such tasks. The only thing you need to do is rotate it 90 (or 270) degrees. and for that you can use CSS. ( Violin )

It is also easily stylized . other examples here and here .

Of course, it will not give the exact same effect (as the accepted answer), but I think this option is worth mentioning for future users who will encounter this issue. (and with some transparent png overlay, it might be exactly the same ..)

For the JS part, a simple document.getElementById('fuel').setAttribute('value', myValue); must do my job .

Another SO related question with a good fiddle demonstrating dynamic control: how to change <meter> values?