The original code and example of work here .

I can not make it so that when reducing the browser screen:

  1. The progress bar did not crawl to the right.
  2. Correct incorrect calculation. Since I want to make an adaptive layout, the label width is floating, I do not know how to implement What, what events hang?

 $(function() { $('.progressbar').each(function() { var t = $(this); var dataperc = t.attr('data-perc'), barperc = Math.round(dataperc * 5.56); t.find('.progressbar__bar').animate({ width: barperc }, dataperc * 25); t.find('.label').append('<div class="perc"></div>'); function perc() { var length = t.find('.progressbar__bar').css('width'), perc = Math.round(parseInt(length) / 5.65), labelpos = (parseInt(length) - 2); t.find('.label').css('left', labelpos); t.find('.perc').text(perc + '%'); } perc(); setInterval(perc, 0); }); }); 
 @import url(https://fonts.googleapis.com/css?family=Roboto); @import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css); * { margin: 0; padding: 0; } body { background: #fff; } .progressbar { position: relative; display: block; width: 560px; height: 20px; padding: 10px 20px; border-radius: 16px; margin: 40px auto; } .progressbar:before { position: absolute; display: block; content: ""; width: 558px; height: 2px; top: 10px; left: 20px; border-radius: 20px; background: #eeeef0; } .progressbar__bar { position: absolute; display: block; width: 0px; height: 2px; top: 10px; left: 22px; background: #35373e; overflow: hidden; } .progressbar__bar:before { position: absolute; display: block; content: ""; width: 606px; height: 150%; top: -25%; left: -25px; } .progressbar__bar:after { position: absolute; display: block; content: ""; width: 64px; height: 16px; right: 0; top: 0; } .progressbar__bar span { position: absolute; display: block; width: 100%; height: 64px; border-radius: 16px; top: 0; left: 0; opacity: 1; } .progressbar .label { font-family: 'Aldrich', sans-serif; position: absolute; display: block; width: 40px; height: 30px; line-height: 30px; top: 0px; left: 0px; padding: 0 5px; background: #acafba; font-weight: bold; font-size: 12px; color: #fff; text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-6"> <div data-perc="100" class="progressbar"> <div class="progressbar__bar"><span></span> </div> <div class="label"></div> </div> <div data-perc="50" class="progressbar"> <div class="progressbar__bar"><span></span> </div> <div class="label"></div> </div> <div data-perc="30" class="progressbar"> <div class="progressbar__bar"><span></span> </div> <div class="label"></div> </div> </div> </div> </div>

    1 answer 1

    Replace the fixed width of the progress bar (.progressbar) with the percentage width and in the function for calculating the width of the progress bar (.progressbar__bar) also assign a percentage width.

     $('.progress__bar').each(function() { $progess = $(this); $progess.animate({ width: $(this).data('completed') + '%' }); }); 
     .wrap { width: 90%; margin: auto; } .progress { position: relative; height: 5px; background-color: gainsboro; margin-bottom: 30px; } .progress__bar { position: absolute; top: 0; left: 0; height: 100%; background-color: black; } .progress__bar:after { content: attr(data-completed)'%'; position: absolute; top: 100%; right: 0; padding: 1px 3px; font-size: 10px; background-color: black; color: white; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="progress"> <div class="progress__bar" data-completed="25"></div> </div> <div class="progress"> <div class="progress__bar" data-completed="50"></div> </div> <div class="progress"> <div class="progress__bar" data-completed="75"></div> </div> </div>