问题:

So, I have a progress bar. With simple colors, it works perfectly. When I put in images, it filles top-to-bottom, not bottom-to-top, and I don't know how to fix it. Help?

http://jsfiddle.net/Aiphira/1k8sddvq/

    <div id="load-form">     <div class="load-line"></div> </div> <center> <div class="percent"></div> <div class="asd">2000</div> </center>    $(document).ready(function(e) {              var maxonline = 6000;             var currentonline = $(this).find('.asd').html();             var percent = currentonline/maxonline*100;             if(percent > 100)                 percent = 100;             if(currentonline > maxonline) {                 alert('Its full');                 return;             }             $('.load-line').animate({height: percent+'%' },500);             $('.percent').html(percent+'%')      });    #load-form { width:137px; height:87px; background:url('http://la2portal.us.lt/status_online_simple.png'); margin:100px auto 0;  position:relative; }  #load-form .load-line { background:url('http://la2portal.us.lt/status_online_full.png'); height:0; width:137px; bottom:4px; left:6px; max-height:87px;}

回答1:

Absolute positioning and background positioning is required to do this kind of thing. Add these

#load-form .load-line {     position: absolute;     background: url('http://la2portal.us.lt/status_online_full.png') no-repeat bottom;

$(document).ready(function(e) {      var maxonline = 6000;     var currentonline = $(this).find('.asd').html();     var percent = currentonline/maxonline*100;     if(percent > 100)         percent = 100;     if(currentonline > maxonline) {         alert('Its full');         return;     }     $('.load-line').animate({height: percent+'%' },500);     $('.percent').html(percent+'%')  });

#load-form {     width: 137px;     height: 87px;     background: url('http://la2portal.us.lt/status_online_simple.png');     margin: 100px auto 0px;     position: relative; }  #load-form .load-line {     position: absolute;     background: url('http://la2portal.us.lt/status_online_full.png') no-repeat bottom;     height: 0px;     width: 137px;     bottom: 0px;     max-height: 87px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="load-form">     <div class="load-line"></div> </div> <center>     <div class="percent"></div>     <div class="asd">2000</div> </center>

As others have noted, center has been deprecated and its use is discouraged. (Had to include that for anyone who might end up here and didn't look at the comments.)

回答2:

Option 1:

.load-form, .load-line{   vertical-align:bottom }

Option 2:

.load-line{   position:absolute;   bottom:0; }

回答3:

I manipulated your code a bit, check this JSFiddle.

Not sure if that's the way to go, this is a kind of a workaround.

What I did was to set the value first to 0, and then to 100 - %.

I hope this helps.

回答4:

i tried a crude way by adding another grey layer on top and made it shrink in size. This help create the illusion that the green layer is actually filling up from the bottom. Take a look! http://jsfiddle.net/Lgnk5mnz/2/

HTML add in div cover class:

<div id="load-form">     <div class="load-line"></div>     <div class="cover"></div> </div> <center>     <div class="percent"></div>     <div class="asd">2000</div> </center>

CSS add in css for cover class:

#load-form {     width:137px;     height:87px;     background:url('http://la2portal.us.lt/status_online_simple.png');     margin:100px auto 0;     position:relative; } #load-form .load-line {     background:url('http://la2portal.us.lt/status_online_full.png');     height:87px;     width:137px;     bottom:4px;     left:6px;     max-height:87px; } #load-form .cover {     width:137px;     height:87px;     background:url('http://la2portal.us.lt/status_online_simple.png');     margin:-87px auto 0;     position:relative; }

Finally, animate the cover class and remove animation for load-line. $(document).ready(function (e) {

    var maxonline = 6000;     var currentonline = $(this).find('.asd').html();     var percent = currentonline / maxonline * 100;     if (percent > 100) percent = 100;     if (currentonline > maxonline) {         alert('Its full');         return;     }     $('.cover').animate({         height: 100 - percent + '%'     }, 500);     $('.percent').html(percent + '%')  });

回答5:

here you go http://jsfiddle.net/5x275eh1/. I only changed your css

    #load-form { width:137px; height:87px; background:url('http://la2portal.us.lt/status_online_simple.png'); margin:100px auto 0;  position:relative; bottom:4px; left:6px;}      #load-form .load-line { background:url('http://la2portal.us.lt/status_online_full.png'); height:0; width:137px;  max-height:87px;} .load-line {     transform: rotateX(180deg); position:absolute;     bottom:0px; left:0px; }

转载请标明出处:Progress Bar Fill Up Bottom-To-Top

文章来源: Progress Bar Fill Up Bottom-To-Top

标签

bar

background

form