diff --git a/docs/content/docs/components/progress.md b/docs/content/docs/components/progress.md
index e12961d..0045c3d 100644
--- a/docs/content/docs/components/progress.md
+++ b/docs/content/docs/components/progress.md
@@ -5,25 +5,25 @@ description: PaperCSS Progress Bars
 Progress components are built with two HTML elements:
 
 * A `.progress` wrapper element.
-* A `.progress-bar` element to show the progress so far.
+* A `.bar` element to show the progress so far.
 
 ### Basic usage
 
 <div class="row">
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-0"></div>
+    <div class="bar w-0"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-25"></div>
+    <div class="bar w-25"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-50"></div>
+    <div class="bar w-50"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-75"></div>
+    <div class="bar w-75"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-100"></div>
+    <div class="bar w-100"></div>
   </div>
 </div>
 
@@ -32,45 +32,45 @@ Progress components are built with two HTML elements:
 ```html
 <div class="row">
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-0"></div>
+    <div class="bar w-0"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-25"></div>
+    <div class="bar w-25"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-50"></div>
+    <div class="bar w-50"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-75"></div>
+    <div class="bar w-75"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-100"></div>
+    <div class="bar w-100"></div>
   </div>
 </div>
 ```
 
-Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The default progress bar width is 0%.
+Note how we can specify the width using `.w-50`, `.w-75`, etc. If a width class is not provided then 0% is used as default.
 
 ### Backgrounds
 
 <div class="row">
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-primary progress-25"></div>
+    <div class="bar w-25"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-secondary progress-40"></div>
+    <div class="bar secondary w-40"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-success progress-55"></div>
+    <div class="bar success w-55"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-warning progress-70"></div>
+    <div class="bar warning w-70"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-danger progress-85"></div>
+    <div class="bar danger w-85"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-muted progress-100"></div>
+    <div class="bar muted w-100"></div>
   </div>
 </div>
 
@@ -79,22 +79,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
 ```html
 <div class="row">
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-primary progress-25"></div>
+    <div class="bar w-25"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-secondary progress-40"></div>
+    <div class="bar secondary w-40"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-success progress-55"></div>
+    <div class="bar success w-55"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-warning progress-70"></div>
+    <div class="bar warning w-70"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-danger progress-85"></div>
+    <div class="bar danger w-85"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-muted progress-100"></div>
+    <div class="bar muted w-100"></div>
   </div>
 </div>
 ```
@@ -103,22 +103,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
 
 <div class="row">
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-primary progress-25">25%</div>
+    <div class="bar w-25">25%</div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-secondary progress-40">40%</div>
+    <div class="bar secondary w-40">40%</div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-success progress-55">55%</div>
+    <div class="bar success w-55">55%</div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-warning progress-70">70%</div>
+    <div class="bar warning w-70">70%</div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-danger progress-85">85%</div>
+    <div class="bar danger w-85">85%</div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-muted progress-100">100%</div>
+    <div class="bar muted w-100">100%</div>
   </div>
 </div>
 
@@ -127,22 +127,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
 ```html
 <div class="row">
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-primary progress-25">25%</div>
+    <div class="bar w-25">25%</div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-secondary progress-40">40%</div>
+    <div class="bar secondary w-40">40%</div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-success progress-55">55%</div>
+    <div class="bar success w-55">55%</div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-warning progress-70">70%</div>
+    <div class="bar warning w-70">70%</div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-danger progress-85">85%</div>
+    <div class="bar danger w-85">85%</div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-muted progress-100">100%</div>
+    <div class="bar muted w-100">100%</div>
   </div>
 </div>
 ```
@@ -151,22 +151,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
 
 <div class="row">
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-primary progress-striped progress-25"></div>
+    <div class="bar striped w-25"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-secondary progress-striped progress-40"></div>
+    <div class="bar striped secondary w-40"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-success progress-striped progress-55"></div>
+    <div class="bar striped success w-55"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-warning progress-striped progress-70"></div>
+    <div class="bar striped warning w-70"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-danger progress-striped progress-85"></div>
+    <div class="bar striped danger w-85"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-muted progress-striped progress-100"></div>
+    <div class="bar striped muted w-100"></div>
   </div>
 </div>
 
@@ -175,22 +175,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
 ```html
 <div class="row">
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-primary progress-striped progress-25"></div>
+    <div class="bar striped w-25"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-secondary progress-striped progress-40"></div>
+    <div class="bar striped secondary w-40"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-success progress-striped progress-55"></div>
+    <div class="bar striped success w-55"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-warning progress-striped progress-70"></div>
+    <div class="bar striped warning w-70"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-danger progress-striped progress-85"></div>
+    <div class="bar striped danger w-85"></div>
   </div>
   <div class="progress margin-bottom">
-    <div class="progress-bar progress-muted progress-striped progress-100"></div>
+    <div class="bar striped muted w-100"></div>
   </div>
 </div>
 ```
diff --git a/src/components/_progress.scss b/src/components/_progress.scss
index 2f3a0dd..d3562d9 100644
--- a/src/components/_progress.scss
+++ b/src/components/_progress.scss
@@ -1,17 +1,12 @@
 .progress {
   @include border-style(5);
   border: 2px solid $primary;
-  box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
+  box-shadow: 2px 8px 4px -6px hsla(0%, 0%, 0%, 0.3);
   height: 1.2rem;
   overflow: hidden;
   width: 100%;
 
-  @mixin striped-background($base-color) {
-    $color-dark: darken($base-color, 10%);
-    background: repeating-linear-gradient(45deg, $base-color, $base-color 0.25rem, $color-dark 0.25rem, $color-dark 0.5rem);
-  }
-
-  .progress-bar {
+  .bar {
     @include border-style(5);
     @include transition;
     background-color: $primary-light;
@@ -24,29 +19,34 @@
     text-align: center;
     width: 0%;
 
-    &.progress-striped {
+    @mixin striped-background($base-color) {
+      $color-dark: darken($base-color, 10%);
+      background: repeating-linear-gradient(45deg, $base-color, $base-color 0.25rem, $color-dark 0.25rem, $color-dark 0.5rem);
+    }
+
+    &.striped {
       @include striped-background($primary-light);
     }
-  }
 
-  @each $colorName, $color, $color-light in $colors {
-    .progress-#{$colorName} {
-      background-color: $color-light;
-
-      &.progress-striped {
-        @include striped-background($color-light);
+    @each $colorName, $color, $color-light in $colors {
+      &.#{$colorName} {
+        background-color: $color-light;
+  
+        &.striped {
+          @include striped-background($color-light);
+        }
       }
     }
-  }
 
-  @for $i from 0 through 100 {
-    .progress-#{$i} {
-      width: $i + %;
+    @for $i from 0 through 100 {
+      &.w-#{$i} {
+        width: $i + %;
+      }
+    }
+  
+    &.w-0,
+    &.w-100 {
+      border-right: 0;
     }
   }
-
-  .progress-0,
-  .progress-100 {
-    border-right: 0;
-  }
 }