cynx · November 18, 2015 11:52 · Mar 22, 2013
diff --git a/index.html b/index.html
@@ -0,0 +1,4 @@
+<!-- Change the below data attribute to play -->
+<div class="progress-wrap progress" data-progress-percent="25">
+  <div class="progress-bar progress"></div>
+</div>
diff --git a/script.js b/script.js
@@ -0,0 +1,21 @@
+// on page load...
+    moveProgressBar();
+    // on browser resize...
+    $(window).resize(function() {
+        moveProgressBar();
+    });
+
+    // SIGNATURE PROGRESS
+    function moveProgressBar() {
+      console.log("moveProgressBar");
+        var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
+        var getProgressWrapWidth = $('.progress-wrap').width();
+        var progressTotal = getPercent * getProgressWrapWidth;
+        var animationLength = 2500;
+
+        // on page load, animate percentage bar to data percentage length
+        // .stop() used to prevent animation queueing
+        $('.progress-bar').stop().animate({
+            left: progressTotal
+        }, animationLength);
+    }
diff --git a/style.scss b/style.scss
@@ -0,0 +1,18 @@
+@import "compass";
+.progress {
+  width: 100%;
+  height: 50px;
+}
+.progress-wrap {
+  background: #f80;
+  margin: 20px 0;
+  overflow: hidden;
+  position: relative;
+  .progress-bar {
+    background: #ddd;
+    left: 0;
+    position: absolute;
+    top: 0;
+  }
+}
+