How to make a progress bar

Question

How would one go about making a progress bar in html css javascript  I don t really want to use Flash  Something along the lines of what can be found here  http   dustincurtis com about html  All I really want is a  progress bar  that changes to the values I give in PHP  What would be your though process  Are there any good tutorials on this

User · Answer

Here is my approach  i ve tried to keep it slim   HTML    lt div class  noload  gt       lt span class  loadtext  id  loadspan  gt 50  lt  span gt       lt div class  load  id  loaddiv  gt       lt  div gt   lt  div gt    CSS    load          width  50       height  12px      background  url  data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC jufvAAAABGdBTUEAALGPC xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv b9Z9j7Fcha827Df4alr1b9Z1j4YsV BuML3v8ZTC 7 GcwuwokrG4DCceH v8Bs2Ef1StO o0AAAAASUVORK5CYII          -moz-border-radius  4px      border-radius  4px      noload      width  100px          background  url data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC jufvAAAABGdBTUEAALGPC xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn zwghCMwGh8Tj 8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi  WKcAAAAASUVORK5CYII             -moz-border-radius  4px      border-radius  4px      border  1px solid  999999          position  relative      loadtext       font-family  Consolas          font-size  11px      color   000000      position  absolute      bottom  -1px      Fiddle  here

User · Answer

Infinitive progress bar using pure Javascript   lt div id  container  style  width 100   height 5px  border 1px solid black   gt     lt div id  progress-bar  style  width 10  background-color  green  height 5px   gt  lt  div gt   lt  div gt    lt script gt    var width   0    window onload   function e        setInterval function              width   width  gt   100   0   width 5            document getElementById  progress-bar   style width   width           200                    lt  script gt    Example http   fiddle jshell net 1kmum4du

User · Answer

var myPer   35      progressbar        progressbar   value  myPer         children   ui-progressbar-value        html myPer toPrecision 3              css  display    block

User · Answer

I was writing up an answer to a similar question that got deleted  so I m posting it here in case it s of use to anyone   The markup can be dropped in anywhere and takes up 50px of vertical real estate even when hidden   To have it take up no vertical space and instead overlay the top 50px  we can just give the progressContainerDiv absolute positioning  inside any positioned element  and style the display property instead of the visible property    The general structure is based on code presented in this Geeks for Geeks article    x000D   x000D  const x000D    progressContainerDiv   document getElementById  progressContainerDiv    x000D    progressShownDiv   document getElementById  progressShownDiv    x000D  let x000D    progress   0  x000D    percentageIncrease   10  x000D   x000D  function animateProgress    x000D    progressContainerDiv style visibility    visible   x000D    const repeater   setInterval increaseRepeatedly  100   x000D    function increaseRepeatedly    x000D      if progress  gt   100   x000D        clearInterval repeater   x000D        progressContainerDiv style visibility    hidden   x000D        progressNumberSpan innerHTML       x000D        progress   1  x000D        x000D      else  x000D        progress   Math min 100  progress   percentageIncrease   x000D        progressShownDiv style width   progress        x000D        progressNumberSpan innerHTML   progress        x000D        x000D      x000D    x000D   progressContainerDiv  x000D    visibility  hidden  x000D    height  40px  x000D    margin  5px  x000D    x000D   x000D   progressBackgroundDiv   x000D    width  50   x000D    margin-left  24   x000D    background-color   ddd  x000D    x000D     x000D   progressShownDiv   x000D    width  1   x000D    height  20px  x000D    background-color   4CAF50  x000D    x000D   x000D   progressNumberSpan  x000D    margin  0 auto  x000D    x000D   lt div id  progressContainerDiv  gt  x000D     lt div id  progressBackgroundDiv  gt  x000D       lt div id  progressShownDiv  gt  lt  div gt  x000D     lt  div gt  x000D     lt div id  progressNumberContainerDiv  gt  x000D       lt span id  progressNumberSpan  gt  lt  span gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt button type  button  onclick  animateProgress    gt Go lt  button gt  x000D   lt div id  display  gt  lt  div gt  x000D   x000D   x000D

User · Answer

If you need to show and hide progress bar inside your php and java script  then follow this step Its a complete solution  no need of any library etc                Design Progress Bar     lt style gt   spinner        position  absolute  left  50   top  50   background-color  white  z-index  100   height  200px    width  300px  margin-left  -300px         Change your loading image here      background  url images loading12 gif  50  50  no-repeat         lt  style gt                    Progress Bar inside your Page   lt div id  spinner  style   display none    gt   lt  div gt                                          Button to show and Hide Progress Bar  lt input class  submit  onClick  Show    type  button  value  Show    gt    lt input class  submit  onClick  Hide    type  button  value  Hide    gt                  Java Script Function to Handle Button Event       lt script language  javascript  type  text javascript  gt   function Show               document getElementById  spinner   style display    inline      function Hide               document getElementById  spinner   style display    none        lt  script gt    Image link  Download image from here

User · Answer

I used  this progress bar  For more information on this you can go through this link i e customization  coding etc    lt script type  text javascript  gt   var myProgressBar   null var timerId   null  function loadProgressBar    myProgressBar   new ProgressBar  my progress bar 1        borderRadius  10      width  300      height  20      maxValue  100      labelText   Loaded in  value 0          orientation  ProgressBar Orientation Horizontal      direction  ProgressBar Direction LeftToRight      animationStyle  ProgressBar AnimationStyle LeftToRight1      animationSpeed  1 5      imageUrl   images v fg12 png       backgroundUrl   images h bg2 png       markerUrl   images marker2 png       timerId   window setInterval function         if  myProgressBar value  gt   myProgressBar maxValue          myProgressBar setValue 0       else         myProgressBar setValue myProgressBar value 1       100      loadProgressBar     lt  script gt    Hope this may be helpful to somenone

User · Answer

You can use setInterval to create a progress bar    x000D   x000D  function animate     x000D    var elem   document getElementById  bar       x000D    var width   1  x000D    var id   setInterval frame  10   x000D    function frame     x000D      if  width  gt   100    x000D        clearInterval id   x000D        else   x000D        width     x000D        elem style width   width         x000D        x000D      x000D    x000D   progress-bar-wrapper   x000D    width  100   x000D    background-color   ddd  x000D    x000D   x000D   bar   x000D    width  1   x000D    height  30px  x000D    background-color  orange  x000D    x000D   lt div id  progress-bar-wrapper  gt  x000D     lt div id  bar  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt br gt  x000D   lt button onclick  animate    gt Click Me lt  button gt  x000D   x000D   x000D

User · Answer

If you are using HTML5 its better to make use of  lt progress gt  tag which was newly introduced    lt progress value  22  max  100  gt  lt  progress gt    Or create a progress bar of your own   Example written in sencha  if   this popup                this popup   new Ext Panel               floating  true              modal  false                 centered true              style  background black opacity 0 6 margin-top 330px                width   100                height   20                styleHtmlContent  true              html    lt p align  center  style  color  FFFFFF font-size 12px  gt Downloading Data lt hr noshade  noshade size  7  style  color  FFFFFF  gt  lt  p gt                       this popup show  pop

User · Answer

Basically its this  You have three files  Your long running PHP script  a progress bar controlled by Javascript   SapphireSun gives an option   and a progress script  The hard part is the Progress Script  your long script must be able to report its progress without direct communication to your progress script  This can be in the form of session id s mapped to progress meters  a database  or check of whats not finished   The process is simple    Execute your script and zero out progress bar Using AJAX  query your progress script Progress script must somehow check on progress Change the progress bar to reflect the value Clean up when finished

User · Answer

You can do it by controlling the width of a div via css  Something roughly along these lines    lt div id  container  style  width 100   height 50px  border 1px solid black   gt     lt div id  progress-bar  style  width 50    change this width           background-image url someImage png          height 45px   gt     lt  div gt   lt  div gt    That width value can be sent in from php if you so desire

User · Answer

You could recreate the progress bar using CSS3 animations to give it a better look   JSFiddle Demo  HTML   lt div class  outer div  gt       lt div class  inner div  gt           lt div id  percent count  gt        lt  div gt   lt  div gt      CSS CSS3   outer div       width  250px      height  25px      background-color   CCC      inner div       width  5px      height  21px      position  relative  top  2px  left  5px      background-color   81DB92      box-shadow  inset 0px 0px 20px  6CC47D      -webkit-animation-name  progressBar      -webkit-animation-duration  3s      -webkit-animation-fill-mode  forwards      percent count       font  normal 1em calibri      position  relative      left  10px      -webkit-keyframes progressBar       from           width  5px            to           width  200px

User · Answer

Though one can build a progress bar using setInterval and animating its width  For best performance while animating a progress bar one has to take into account  compositor only properties and manage layer count   Here is an example    x000D   x000D  function update e   x000D    var left   e currentTarget offsetLeft  x000D    var width   e currentTarget offsetWidth x000D    var position   Math floor  e pageX - left    width   100    1  x000D    var bar   e currentTarget querySelector   progress-bar  bar    x000D    bar style transform    translateX     position         x000D    x000D  body   x000D    padding  2em  x000D    x000D   x000D   progress-bar   x000D    cursor  pointer  x000D    margin-bottom  10px  x000D    user-select  none  x000D    x000D   x000D   progress-bar   x000D    background-color   669900  x000D    border-radius  4px  x000D    box-shadow  inset 0 0 5em 0 5em rgba 0  0  0  0 05   x000D    height  20px  x000D    margin  10px  x000D    overflow  hidden  x000D    position  relative  x000D    transform  translateZ 0   x000D    width  100   x000D    x000D   x000D   progress-bar  bar   x000D    background-color   ececec  x000D    box-shadow  inset 0 0 5em 0 5em rgba 0  0  0  0 05   x000D    bottom  0  x000D    left  0  x000D    position  absolute  x000D    right  0  x000D    top  0  x000D    transition  all 500ms ease-out  x000D    x000D  Click on progress bar to update value x000D   x000D   lt div class  progress-bar  onclick  update event   gt  x000D     lt div class  progress-bar  bar  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use progressbar js  Animated progress bar control and tiny chart  sparkline   Demo and download link    HTML usage    lt div id  my-progressbar  gt  lt  div gt    Javascript usage   var progressBar   window onload   function         progressBar   new ProgressBar  my-progressbar     width   100     height   3px         progressBar setPercent 60

User · Answer

I tried a simple progress bar  It is not clickable just displays the actual percentage  There s a good explication and code here  http   ruwix com simple-javascript-html-css-slider-progress-bar

User · Answer

I know the following doesn t work currently because browsers do not support it yet  but maybe some day this will help   At the time of this post attr   on other properties than content is just a Candidate Recommendation1  As soon as it is implemented  one could create a progress bar with just one element  like the HTML 5  lt progress  gt   but with better styling options and text inside    lt div class  bar  data-value  60  gt  lt  div gt    and pure CSS   bar       position  relative      width  250px      height  50px      text-align  center      line-height  50px      background   003458      color  white      bar before       position  absolute      display  block      top  0      left  0      bottom  0      width  attr data-value    0      currently not supported        content          background  rgba 255  255  255  0 3       bar after       content  attr data-value           Here is the currently not working demo     1 Cannot imagine why this isn t implemented in any browser  First I d think that if you have the functionality for content already  it should not be too hard to extend that  but of course I don t really know to be honest   Second  The above is just one good example showing how powerful this functionality could be  Hopefully they start to support it soon  or it won t even be part of the final specification

User · Answer

x000D   x000D   lt html gt  x000D   lt style gt  x000D   myProgress   x000D    width  100   x000D    background-color   ddd  x000D    x000D   x000D   myBar   x000D    width  10   x000D    height  15px  x000D    background-color   4CAF50  x000D    text-align  center  x000D    line-height  15px  x000D    color  white  x000D    x000D   lt  style gt  x000D   lt body onload  move    gt  x000D   x000D   lt div id  myProgress  gt  x000D     lt div id  myBar  gt 10  lt  div gt  x000D   lt  div gt  x000D   x000D   lt script gt  x000D  var i   0  x000D  function move     x000D    if  i    0    x000D      i   1  x000D      var elem   document getElementById  myBar    x000D      var width   10  x000D      var id   setInterval frame  10   x000D      function frame     x000D        if  width  gt   100    x000D          clearInterval id   x000D          i   0  x000D          else   x000D          width    x000D          elem style width   width        x000D          elem innerHTML   width         x000D          x000D        x000D      x000D    x000D   lt  script gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

http   jqueryui com demos progressbar   Check that out  it might be what you need

User · Answer

You could use ProgressBar js  No dependencies  easy API and supports major browsers    var line   new ProgressBar Line   container    line animate 1     See more examples of usage in the demo page

User · Answer

You can create a progress-bar of any html element that you can set a gradient to   Pretty cool   In the sample below  the background of an HTML element is updated with a linear gradient with JavaScript   myElement style background    linear-gradient to right   57c2c1     percentage        4a4a52     percentage           PS I have set both locations percentage the same to create a hard line  Play with the design  you can even add a border to get that classic progress-bar look       https   jsfiddle net uoL8j147 1

[javascript] How to make a progress bar

Examples related to javascript

Examples related to html

Examples related to css

Examples related to progress-bar