Implement minimal progressbar with HTML/CSS

Question

Is it possible to implement a minimal progress-bar that fits into a cell in a table (a 2-color bar with a text on it) in HTML/CSS without Javascript?

A dynamic update of the progress bar is not needed.

Do you want the progress-bar to be dynamic? As in move along as some process is run? — pasquers, Jun 26 '15 at 15:26
possible duplicate of [Progress Bar with HTML and CSS](http://stackoverflow.com/questions/7190898/progress-bar-with-html-and-css) — d3dave, Jun 26 '15 at 15:27
This jsFiddle may be of help to you: http://jsfiddle.net/jenniferperrin/j4d87/ — Dan Beaulieu, Jun 26 '15 at 15:35

David J · Answer 1 · 2015-06-26T15:37:14.537

2

you need javascript to implement dynamic behavior on a page (e.g., if you want to update the progress bar)

of course, you could always try using a META tag in the HEAD to periodically refresh the entire page, and update the progress bar on the server side, like so:

<meta http-equiv="refresh" content="15">

(I'm assuming that by "implement" you mean getting the progress bar to display the current progress)

EDIT: HTML5 includes a new progress tag:

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

edited Jun 26 '15 at 15:37

answered Jun 26 '15 at 15:30

David J

659
1
9
25

The progress won't change for days in my use-case, so I just display a fixed value. – Roland Seuhs Jun 26 '15 at 15:36

score 1 · Accepted Answer · answered Jun 26 '15 at 15:53

Just adjust to your needs: (color, width) Loaded percentage is inline style.

<div class="progress-bar">
  <span class="progress" style="width: 20%;"></span>
  <span class="text">Loading...</span>
</div>

<style type="text/css">
.progress-bar{
  position: relative;
  width: 200px;
  height: 24px;
  background: #bdc3c7;
  border-radius: 5px;
  overflow: hidden;
  font-family: "Arial";
}
.progress-bar .progress{
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #2ecc71;
}
.progress-bar .text{
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 24px;
  vertical-align: center;
  color: #2c3e50;
}
</style>

Implement minimal progressbar with HTML/CSS

2 Answers2