Progress Bar with HTML and CSS

Question

I want to create a progress bar like in the below image     I have no idea about creating this  Should I use HTML5 techniques   Would you please give me some help about creating this progress bar

User · Answer

In modern browsers you could use a CSS3 & HTML5 progress Element!

_x000D_

progress {_x000D_
  width: 40%;_x000D_
  display: block; /* default: inline-block */_x000D_
  margin: 2em auto;_x000D_
  padding: 3px;_x000D_
  border: 0 none;_x000D_
  background: #444;_x000D_
  border-radius: 14px;_x000D_
}_x000D_
progress::-moz-progress-bar {_x000D_
  border-radius: 12px;_x000D_
  background: orange;_x000D_
_x000D_
}_x000D_
/* webkit */_x000D_
@media screen and (-webkit-min-device-pixel-ratio:0) {_x000D_
  progress {_x000D_
    height: 25px;_x000D_
  }_x000D_
}_x000D_
progress::-webkit-progress-bar {_x000D_
    background: transparent;_x000D_
}  _x000D_
progress::-webkit-progress-value {  _x000D_
  border-radius: 12px;_x000D_
  background: orange;_x000D_
}

_x000D_

<progress max="100" value="40"></progress>

_x000D_

User · Answer

2014 answer  Since 2014 HTML now 5 includes a  lt progress gt  element that does not need  JavaScript  The percent value moves with the progress using inline content  Tested only in webkit  Hope it helps   jsFiddle  CSS    x000D   x000D  progress   x000D   display inline-block  x000D   width 190px  x000D   height 20px  x000D   padding 15px 0 0 0  x000D   margin 0  x000D   background none  x000D   border  0  x000D   border-radius  15px  x000D   text-align  left  x000D   position relative  x000D   font-family  Arial  Helvetica  sans-serif  x000D   font-size  0 8em  x000D    x000D  progress  -webkit-progress-bar   x000D   height 11px  x000D   width 150px  x000D   margin 0 auto  x000D   background-color   CCC  x000D   border-radius  15px  x000D   box-shadow 0px 0px 6px  777 inset  x000D    x000D  progress  -webkit-progress-value   x000D   display inline-block  x000D   float left  x000D   height 11px  x000D   margin 0px -10px 0 0  x000D   background   F70  x000D   border-radius  15px  x000D   box-shadow 0px 0px 6px  777 inset  x000D    x000D  progress after   x000D   margin -26px 0 0 -7px  x000D   padding 0  x000D   display inline-block  x000D   float left  x000D   content  attr value       x000D    x000D   lt progress id  progressBar  max  100  value  77  gt  lt  progress gt  x000D   x000D   x000D

User · Answer

I like this one    Article Demo Downloads   very slick with only this as HTML and the rest CSS3 that is backwards compatible  although it will have less eyecandy   Edit Added code below  but taken directly from the page above  all credit to that author   x000D   x000D   meter   x000D    height  20px  x000D       Can be anything    x000D    position  relative  x000D    background   555  x000D    -moz-border-radius  25px  x000D    -webkit-border-radius  25px  x000D    border-radius  25px  x000D    padding  10px  x000D    -webkit-box-shadow  inset 0 -1px 1px rgba 255  255  255  0 3   x000D    -moz-box-shadow  inset 0 -1px 1px rgba 255  255  255  0 3   x000D    box-shadow  inset 0 -1px 1px rgba 255  255  255  0 3   x000D    x000D   x000D   meter gt span   x000D    display  block  x000D    height  100   x000D    -webkit-border-top-right-radius  8px  x000D    -webkit-border-bottom-right-radius  8px  x000D    -moz-border-radius-topright  8px  x000D    -moz-border-radius-bottomright  8px  x000D    border-top-right-radius  8px  x000D    border-bottom-right-radius  8px  x000D    -webkit-border-top-left-radius  20px  x000D    -webkit-border-bottom-left-radius  20px  x000D    -moz-border-radius-topleft  20px  x000D    -moz-border-radius-bottomleft  20px  x000D    border-top-left-radius  20px  x000D    border-bottom-left-radius  20px  x000D    background-color   f1a165  x000D    background-image  -webkit-gradient linear  left top  left bottom  color-stop 0   f1a165   color-stop 1   f36d0a    x000D    background-image  -webkit-linear-gradient top   f1a165   f36d0a   x000D    background-image  -moz-linear-gradient top   f1a165   f36d0a   x000D    background-image  -ms-linear-gradient top   f1a165   f36d0a   x000D    background-image  -o-linear-gradient top   f1a165   f36d0a   x000D    -webkit-box-shadow  inset 0 2px 9px rgba 255  255  255  0 3   inset 0 -2px 6px rgba 0  0  0  0 4   x000D    -moz-box-shadow  inset 0 2px 9px rgba 255  255  255  0 3   inset 0 -2px 6px rgba 0  0  0  0 4   x000D    position  relative  x000D    overflow  hidden  x000D    x000D   lt div class  meter  gt  x000D     lt span style  width  33   gt  lt  span gt  x000D     lt  -- I use my viewmodel in MVC to calculate the progress and then use  Model progress to place it in my HTML with Razor -- gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Using setInterval    x000D   x000D  var totalelem   document getElementById  total    x000D  var progresselem   document getElementById  progress    x000D  var interval   setInterval function    x000D      if progresselem clientWidth gt  totalelem clientWidth  x000D        x000D          clearInterval interval   x000D          return  x000D        x000D      progresselem style width   progresselem offsetWidth 1  px   x000D    10  x000D   outer x000D    x000D      width  200px  x000D      height  15px  x000D      background  red  x000D    x000D   inner x000D    x000D      width  0px  x000D      height  15px  x000D      background  green  x000D    x000D   lt div id  total  class  outer  gt  x000D       lt div id  progress  class  inner  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Using CSS Transtitions    x000D   x000D  function loading   x000D    x000D      document getElementById  progress   style width  200px   x000D    x000D   outer x000D    x000D      width  200px  x000D      height  15px  x000D      background  red  x000D    x000D   inner x000D    x000D      width  0px  x000D      height  15px  x000D      background  green  x000D      -webkit-transition width 3s linear  x000D      transition  width 3s linear  x000D    x000D   lt div id  total  class  outer  gt  x000D       lt div id  progress  class  inner  gt  lt  div gt  x000D   lt  div gt  x000D   lt button id  load  onclick  loading    gt Load lt  button gt  x000D   x000D   x000D

User · Answer

Create an element which shows the left part of the bar  the round part   also create an element for the right part  For the actual progress bar  create a third element with a repeating background and a width which depends on the actual progress  Put it all on top of the background image  containing the empty progress bar    But I suppose you already knew that     Edit  When creating a progress bar which do not use textual backgrounds  You can use the border-radius to get the round effect  as shown by Rikudo Sennin and RoToRa

User · Answer

There is a tutorial for creating an HTML5 progress bar here  If you don t want to use HTML5 methods or you are looking for an all-browser solution  try this code   x000D   x000D   lt div style  width  150px  height  25px  background-color   dbdbdb   gt     lt div style  height  25px  width 87   background-color  gold  gt  amp nbsp  lt  div gt   lt  div gt  x000D   x000D   x000D   You can change the color GOLD to any progress bar color and  dbdbdb to the background-color of your progress bar

User · Answer

x000D   x000D   progressbar   x000D    background-color  black  x000D    border-radius  13px  x000D        height of inner div    2   padding    x000D    padding  3px  x000D    x000D   x000D   progressbar gt div   x000D    background-color  orange  x000D    width  40   x000D       Adjust with JavaScript    x000D    height  20px  x000D    border-radius  10px  x000D    x000D   lt div id  progressbar  gt  x000D     lt div gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Fiddle   EDIT  Changed Syntax highlight  changed descendant to child selector

User · Answer

http   jsfiddle net cwZSW 1406    x000D   x000D   progress   x000D      background   333  x000D      border-radius  13px  x000D      height  20px  x000D      width  300px  x000D      padding  3px  x000D    x000D   x000D   progress after   x000D      content      x000D      display  block  x000D      background  orange  x000D      width  50   x000D      height  100   x000D      border-radius  9px  x000D    x000D   lt div id  progress  gt  lt  div gt  x000D   x000D   x000D

User · Answer

If you wish to have a progress bar without adding some code PACE can be an awesome tool for you   Just include pace js and a CSS theme of your choice  and you get a beautiful progress indicator for your page load and AJAX navigation  Best thing with PACE is the auto detection of progress   It contains various themes and color schemes as well   Worth a try

User · Answer

Progress Bar without nested divs    for every element where the css linear-gradient works   Here the JSFiddle http   jsfiddle net oj1L3y6t 2    x000D   x000D  function show progress i    x000D    var progress1   i  x000D    var progress2   progress1   1  x000D    var progress3   progress1   2  x000D   x000D    var magic    linear-gradient to right   FFC2CE     progress1       red     progress2         FFFFFF     progress3         x000D    document getElementById  progress-0   style background   magic  x000D   x000D    var magic    linear-gradient to right  lightblue     progress1        lightgreen     progress2         x000D    document getElementById  progress-1   style background   magic  x000D   x000D    var magic    linear-gradient to right  lightblue     progress1         FFFFFF 100     x000D    document getElementById  progress-2   style background   magic  x000D   x000D    var magic    linear-gradient  FFC2CE     progress1       red     progress2         FFFFFF     progress3         x000D    document getElementById  progress-3   style background   magic  x000D    x000D   x000D  function timeout     x000D    t   setTimeout function     x000D      show progress t  x000D      timeout    x000D       50   x000D    if  t    78    x000D      clearTimeout t   x000D      x000D    console log t   x000D    x000D   x000D  timeout    x000D   progress-0   x000D    border  1px solid black  x000D    width  500px  x000D    background   999  x000D    text-align  center  x000D    x000D   x000D   progress-1   x000D    border  1px solid black  x000D    width  500px  x000D    background   999  x000D    text-align  center  x000D    margin-top  10px  x000D    border-radius  10px  x000D    x000D   x000D   progress-2   x000D    border  1px solid black  x000D    width  500px  x000D    background   999  x000D    text-align  center  x000D    margin-top  10px  x000D    x000D   x000D   progress-3   x000D    border  1px solid black  x000D    width  100px  x000D    height  100px  x000D    background   999  x000D    line-height  100px  x000D    text-align  center  x000D    margin-top  10px  x000D    border-radius  200px  x000D    x000D   lt div id  progress-0  gt Loading lt  div gt  x000D   lt input id  progress-1  value  Loading  gt  lt  input gt  x000D   lt button id  progress-2  gt Loading lt  button gt  x000D   lt p id  progress-3  gt Loading lt  p gt  x000D   x000D   x000D

User · Answer

black-strip     width 100       height  30px             background-color black       green-strip     width 0                  height  30px             background-color lime      animation-name  progress-bar                 animation-duration  4s        animation-iteration-count  infinite       keyframes progress-bar        from width 0        to width 100            lt div class  black-strip  gt           lt div class  green-strip  gt           lt  div gt      lt  div gt

User · Answer

Why can t you just Create Multiple pictures for each part of the status bar  If it s a third just show a third of the status bar    it s very simple  You could probably figure out how to change it to the next picture based of input with the form tag  Here s my part of the code  you have to figure out the form stuff later   lt form gt   lt  -- extra code -- gt   lt  --first progress bar -- gt   lt img src  directory  gt  lt  img gt   lt  --second progress bar -- gt   lt img src  directory  gt  lt  img gt   lt  --et caetera   -- gt   lt  form gt    Now it seems simple  doesn t it

User · Answer

bar   background - color  blue  height  40 px  width  40 px  border - style  solid  border - right - width  1300 px  border - radius  40 px  animation - name  Load  animation - duration  11 s  position  relative  animation - iteration - count  1  animation - fill - mode  forwards      keyframes Load   100         width  1300 px border - right - width  5

User · Answer

Same as  RoToRa s answer  with a some slight adjustments  correct colors and dimensions     x000D   x000D  body   x000D    background-color   636363  x000D    padding  1em  x000D    x000D   x000D   progressbar   x000D    background-color   20201F  x000D    border-radius  20px      heightOfInnerDiv   2    padding    x000D    padding  4px  x000D    x000D   x000D   progressbar gt div   x000D    background-color   F7901E  x000D    width  48   x000D       Adjust with JavaScript    x000D    height  16px  x000D    border-radius  10px  x000D    x000D   lt div id  progressbar  gt  x000D     lt div gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here s the fiddle  jsFiddle   And here s what it looks like

User · Answer

x000D   x000D   loading   x000D    position  relative  x000D    width  50   x000D    height  200px  x000D    border  1px solid rgba 160  160  164  0 2   x000D    background-color  rgba 160  160  164  0 2   x000D    border-radius  3px  x000D    x000D   x000D  span loader   x000D    position  absolute  x000D    top  40   x000D    left  10   x000D    width  250px  x000D    height  20px  x000D    border-radius  8px  x000D    border  2px solid rgba 160  160  164  0 8   x000D    padding  0  x000D    x000D   x000D  span loader span innerLoad   x000D    text-align  center  x000D    width  140px  x000D    font-size  15px  x000D    font-stretch  extra-expanded  x000D    color   2A00FF  x000D    padding  1px 18px 3px 80px  x000D    border-radius  8px  x000D    background  rgb 250  198  149   x000D    background  -moz-linear-gradient left  rgba 250  198  149  1  0   rgba 245  171  102  1  47   rgba 239  141  49  1  100    x000D    background  -webkit-gradient linear  left top  right top  color-stop 0   rgba 250  198  149  1    color-stop 47   rgba 245  171  102  1    color-stop 100   rgba 239  141  49  1     x000D    background  -webkit-linear-gradient left  rgba 250  198  149  1  0   rgba 245  171  102  1  47   rgba 239  141  49  1  100    x000D    background  -o-linear-gradient left  rgba 250  198  149  1  0   rgba 245  171  102  1  47   rgba 239  141  49  1  100    x000D    background  -ms-linear-gradient left  rgba 250  198  149  1  0   rgba 245  171  102  1  47   rgba 239  141  49  1  100    x000D    background  linear-gradient to right  rgba 250  198  149  1  0   rgba 245  171  102  1  47   rgba 239  141  49  1  100    x000D    filter  progid DXImageTransform Microsoft gradient  startColorstr   fac695   endColorstr   ef8d31   GradientType 1   x000D    x000D   lt div class  loading  gt  x000D     lt span class  loader  gt  x000D         lt span class  innerLoad  gt Loading    lt  span gt  x000D     lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

[html] Progress Bar with HTML and CSS

Examples related to html

Examples related to css

Examples related to progress-bar