title: CSS Vertical Progress Bar
body: <p><strong>Vertical Progress Bar</strong></p>
  
  <hr>
  
  <p>The proper styling of this bar requires:</p>
  
  <ul>
  <li><p>the progress bar must be covered by an element holding a number of cross-bars.</p></li>
  <li><p>no images (i.e. using an image of the cross bars).</p></li>
  <li><p>the progress bar must be attached to the bottom of the origin, and extend upward.</p></li>
  <li><p>most importantly, the progress bar's wrapper width must remain dynamic (%), not defined statically. </p></li>
  <li><p>the bar's width stretches depending on the width of its container component</p></li>
  <li><p>A pure CSS solution is best, but JQuery is fair game.</p></li>
  </ul>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/m7qTe.jpg" alt="enter image description here"> </p>
  
  <hr>
  
  <p><strong>Progress Bar HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="attendance"&gt;
          &lt;p class="title"&gt;attendance&lt;/p&gt;
          &lt;div class="attendance-bar"&gt;
              &lt;div class="attendance-level"&gt;&lt;/div&gt;
              &lt;div class="attendance-cage-css"&gt;
                  &lt;div class="crossbar-1"&gt;&lt;/div&gt;
                  &lt;div class="crossbar-2"&gt;&lt;/div&gt;
                  &lt;div class="crossbar-3"&gt;&lt;/div&gt;
                  &lt;div class="crossbar-4"&gt;&lt;/div&gt;
                  &lt;div class="crossbar-5"&gt;&lt;/div&gt;
                  &lt;div class="crossbar-6"&gt;&lt;/div&gt;
                  &lt;div class="crossbar-7"&gt;&lt;/div&gt;
                  &lt;div class="crossbar-8"&gt;&lt;/div&gt;
                  &lt;div class="crossbar-9"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>JS Fiddle including HTML markup &amp; all CSS classes:</strong></p>
  
  <p><a href="http://jsfiddle.net/q2SAK/" rel="noreferrer">http://jsfiddle.net/q2SAK/</a></p>
  
  <p><strong>My Progress:</strong></p>
  
  <p><a href="http://jsfiddle.net/q2SAK/2/" rel="noreferrer">http://jsfiddle.net/q2SAK/2/</a></p>
  
  <hr>
  
  <p><strong>Bonus:</strong></p>
  
  <p>I've implemented unique classes for each crossbar in order to achieve the increasing margins between them shown above. Thumbs up if you know how to achieve the effect without the classes. Show it in your JS Fiddle.</p>
  
  <hr>