Progress Bar with HTML and CSS

html

responsive-design

css

progress-bar

byAnton Shumikhin·Sep 9, 2024

Create a Progress Bar using nested <div> elements. Use CSS for design and the width of the inner <div> as the progress indicator. Here's the bare-bones code:

<div class="progress-container">
  <div class="progress-value" style="width: 70%;"></div>
</div>

.progress-container {
  width: 100%;
  background: #ddd;
}

.progress-value {
  height: 20px;
  background: #76b852;
  width: 0; /* The fun begins here */
  transition: width 0.5s; /* Like butter */
}

Modify the width in the style to smoothly illustrate progress.

Tailoring the bar to devices

To make your Progress Bar fit comfortably on devices of any size, media queries are a must. To maintain the same visual appeal regardless of the progression, the border-radius depends on the height.

@media (max-width: 600px) {
  .progress-container {
    padding: 5px;
  }

  .progress-value {
    height: 10px; /* Just half the calories */
  }
}

Keep your progress bar's corners round and happy irrespective of how full it gets by adjusting the inner div's border-radius.

.progress-value {
  /* ...previous styles... */
  border-radius: 10px; /* We like curves */
}

Child selectors are the way to go for precise element styling, giving your users an accurate visual guide.

Making the bar your own

HTML5 provides a nifty <progress> element that simplifies the progress bar creation process and does away with the need for JavaScript. Just set max and value attributes for instant updates:

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

With some ::-webkit-progress-bar and ::-moz-progress-bar magic, you can make the <progress> element dance to your tunes in Webkit and Mozilla browsers:

progress {
  width: 100%; /* Full Steam Ahead */
  appearance: none;
}

progress::-webkit-progress-bar {
  background: #eee;
}

progress::-webkit-progress-value {
  background: #76b852;
}

progress::-moz-progress-bar {
  background: #76b852;
}

Visualising progress

Take a dip into the minimalist, graphical world of ASCII art, where every square is a chunk of progress. The better part is, this wall won’t keep anyone out:

Progress, Step by Step:
|🎃🎃🎃🎃🎃🎃🎃🎃🎃🎃🎃🎃🎃...    | 75%
|🎃🎃🎃🎃🎃🎃🎃🎃🎃🎃...        | 50%
|🎃🎃🎃🎃🎃...    | 25%
|...    | 0%

There you have it: plenty of pumpkin progress to flesh out the abstract concept of loading completion.

Vibrant bar with panache

Customising your bar's output – whether textual or visual – is just a :after pseudo-element away.

.progress-container:after {
  content: 'Loading... 70%';
  position: absolute;
  right: 10px;
  top: 0;
}

Going full width with margin: 0 auto; makes for a snazzy, centered progress bar. Around the edges, padding keeps your content cute and cozy.

.progress-container {
  /* ...previous styles... */
  margin: 0 auto;
  padding: 4px; /* Comfort comes first */
}

Ensuring uniform look across browsers

Nothing's worse than design discrepancies across browsers. Set up fallbacks for older browsers – especially for modern elements like <progress>.

explain-codes / Html / Progress Bar with HTML and CSS

Linked

Div width 100% minus fixed amount of pixels



How to center an absolute div horizontally using CSS?



Switching the order of block elements with CSS



Css Inset Borders



How to auto adjust the <div> height according to content in it?



Html: How to create a DIV with only vertical scroll-bars for long paragraphs?



Input with display:block is not a block, why not?



Tailoring the bar to devices Making the bar your own Visualising progress Vibrant bar with panache Ensuring uniform look across browsers