Progress Bar Wobble Effect

Question

Wobbling Vertical Progress Bar

---

I learned how to build a neat, dynamically sized vertical progress bar with cross-bars in This Question.

No

Answer 1

Don't think StackOverflow is meant for these kind of 'questions', but oh well, felt like it, so made a far more extensive answer than a sane person would.

Let me start with a couple of technologies I incorporated and their justification

• SVG, it feels terribly wrong when DOM is used to shape an image. Either actual images should be used for the background/foreground, or one should use something like SVG instead of DOM. The disadvantage of SVG is that it can only provide uniform scaling.

• X-Tags, X-tags is a Web Components Custom Element polyfill developed by Mozilla. It allows us to write something like

  And then do

  var xbar1 = document.getElementById("test");
  xbar1.value = 10;
  xbar1.speed = 2;
  xbar1.wobble = 10;
  xbar1.effect= "dampen";
  

  Cool right? This however means you will first need to read the documentation here. Before you will be able to understand the code.

• Javascript for the animations: Although you could make some elemantary wobble using CSS3 animations, the requirement for the control over it and the colour change requirement makes one choose for Javascript.
• Two wobble effects are incorporated, a simple y=sin(t) and a more complexed dampened wave. One could easily add other waves as well, but these seemed to be the most reasonably interesting ones.
• Regarding the code to calculate the colour. I am simply splitting the bar in two halves, for the top half I define a colour range from green to orange and for the second half from orange to red. Next in the code I 'find the point' between those two colours depending on how filled the bar is. (E.g. if we're at 80% filled of the total bar, it means that we're at 60% of the top half, so we take that point between orange and green)

As the code itself is over 200 lines long I will refrain from posting it here and you can find it on this jsfiddle.