How to get css width property in percents

Question

I'm trying to make loader, similar to that red line on top of the page of youtube.

I have a div, that represents line.

<div class="line" style="border-bottom: 3px solid red"><div>

In the beginning of loading process, I make the width of that div 10% of normal:

$('.line').css('width', 10%);

Then, on each loading step, I want to add width by 10%.

function loadStep () {
   var width = $('.loader').css('width'); //get the current width, suppose it 10%
   var nextWidth = width + 10%; //calc next width
   $('.line').animate({width: "20%"}, 500); //I want to animate it to next width
}

Problem is - when I get var width, it is in Pixels, not Percents. So I'm not able to add required 10%.

How do I get actual width of element in percents? I've tried this:

var width = $('.line').attr('style').split(' :')[1]

It does work when first function run is completed and we have style attribe, althoght it is sill a messy method, parsing style attr.

Any suggestions?

damoiser · Answer 1 · 2013-12-08T13:33:40.593

In your case I think that the better solution is something like that:

<div id="loader_container" style="width:100%">
  <div class="line" style="border-bottom: 3px solid red"><div>
</div>

You retrieve the width in pixel from the "loader_container" (so it is responsive), then for each step you add the 10% in pixels (100% in pixels of the loader_container / 10.0).

You can add even different value between each others (e.g.: first step: 10%, second step: 5%,...), you should only change the calculation of the width to add.

When you increase the width in each step, you should verify that if the width of the line is > of the loader container, then the width of the line will be equal to the loader_container (in the last case when the loader is full).

score 1 · Answer 2 · edited May 23 '17 at 12:29

You can always calculate it manually, see this answer for how to do that:

Is it possible to use jQuery to get the width of an element in percent or pixels, based on what the developer specified with CSS?

You could also store the width in a variable. This makes the most sense to me since you are already maintaining the progress somewhere and don't have to fetch it from the DOM element again:

var progress=10;

$( function()
  {

          $('#add10').click( function()
          {
             progress+=10;
             if (progress>100) progress=100;             
             $('#bar2').css('width', progress + '%' );
          });

  });

http://jsfiddle.net/E2LeG/1/

I have trouble starting another step wile element is being animated on previousStep. — Prosto Trader, Dec 08 '13 at 13:59

score 0 · Answer 3 · answered Dec 08 '13 at 13:36

0

use width() method to get the integer value, instead of css('width')

answered Dec 08 '13 at 13:36

n1kkou

3,096
2
21
32

you get the integer value, and split it into 100 parts(into a variable called increment, lets say), then you increment the bar by 10*increment – n1kkou Dec 08 '13 at 14:10
yep this could work but still I have to keep in memory container width and current width of the loader. sucks could be much easier just increment %width of the loader – Prosto Trader Dec 08 '13 at 15:29

How to get css width property in percents

3 Answers3