title: Progress Bar Wobble Effect
body: <p><strong>Wobbling Vertical Progress Bar</strong></p>
  
  <hr>
  
  <p>I learned how to build a neat, dynamically sized vertical progress bar with cross-bars in <a href="https://stackoverflow.com/questions/22337851/css-vertical-progress-bar?noredirect=1#comment33950248_22337851">This Question</a>.</p>
  
  <p>Now, I want to make it fun!</p>
  
  <hr>
  
  <p>The bar's wobble function should:</p>
  
  <ul>
  <li>take 4 parameters: <code>element</code> , <code>height</code> , <code>speed</code> , &amp; <code>random</code></li>
  <li>wobble the <code>element</code> height percentage with a customizable, randomized factor</li>
  <li>keep track of the elements's true height, which can change at any time!</li>
  <li>use an event (in the Fiddle, I supply an input and button) to set the true height to a new value, and animate to that height.</li>
  </ul>
  
  <blockquote>
    <p>I'm looking for the simplest answer. Please explain how you did it, so that we JS newbies can learn tricks! Posting a Bounty of +50 to the best answer.</p>
  </blockquote>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/9QSqi.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>Bonus:</p>
  
  <ul>
  <li>change the bars's background color value based on the bar's true height. Red is 0%, Yellow is 50%, and Green is 100%;</li>
  </ul>
  
  <blockquote>
    <p>If your function does this too, I'll add a +100 Bounty to your answer instead.</p>
  </blockquote>
  
  <hr>
  
  <p><a href="http://jsfiddle.net/q2SAK/5/" rel="nofollow noreferrer">Template Fiddle</a></p>
  
  <hr>
  
  <p><a href="http://jsfiddle.net/q2SAK/5/" rel="nofollow noreferrer">My Progress</a> </p>
  
  <blockquote>
    <p>I'm asking this question because I don't know how to do this yet.
    But, I'm going to try it from what I've learned so far, and keep my
    progress posted here.</p>
  </blockquote>