syzd syzd - 3 months ago 6
CSS Question

why js code separate the divisions?

In the following code, the js code is supposed to give an animated load to the progress bar. But, don't know why the yellow bar is displaced and is not placed right on



// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'}
});

bar.animate(1.0); // Number from 0.0 to 1.0

#liner {
position: relative;
width: 600px;
height: 7px;
background-color: #000000;
}

#container {
position: absolute;
width: 400px;
height: 8px;
background-color: #f0f0f0;
}

<div id="liner">
<div id="container"></div>
</div>




Answer

You are just missing the css property position: absolute; in your svg.


jsFiddle Demo


CODE SNIPPET:

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {
    width: '100%',
    height: '100%',
    position: 'absolute'
  }
});

bar.animate(1.0); // Number from 0.0 to 1.0
#liner {
  position: relative;
  width: 600px;
  height: 7px;
  background-color: #000000;
}
#container {
  position: absolute;
  width: 400px;
  height: 7px;
  background-color: #f0f0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
<div id="liner">
  <div id="container"></div>
</div>