diff --git a/components/progress_bar/index.jsx b/components/progress_bar/index.jsx
index 49bc14cc..67308c26 100644
--- a/components/progress_bar/index.jsx
+++ b/components/progress_bar/index.jsx
@@ -1,7 +1,7 @@
 /* global React */
 
 import { addons } from 'react/addons';
-import css from './style';
+import style from './style';
 import prefixer from '../utils/prefixer';
 
 export default React.createClass({
@@ -45,8 +45,8 @@ export default React.createClass({
 
   renderCircular () {
     return (
-      <svg className={css.circle}>
-        <circle className={css.circlePath} style={this.circularStyle()} cx='30' cy='30' r='25' />
+      <svg className={style.circle}>
+        <circle className={style.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
       </svg>
     );
   },
@@ -66,17 +66,17 @@ export default React.createClass({
     const {buffer, value} = this.linearStyle();
     return (
       <div>
-        <span ref='buffer' data-ref='buffer' className={css.bufferBar} style={buffer}></span>
-        <span ref='value' data-ref='value' className={css.valueBar} style={value}></span>
+        <span ref='buffer' data-ref='buffer' className={style.buffer} style={buffer}></span>
+        <span ref='value' data-ref='value' className={style.value} style={value}></span>
       </div>
     );
   },
 
   render () {
-    let className = this.props.type === 'linear' ? css.linearBar : css.circularBar;
+    let className = this.props.type === 'linear' ? style.linear : style.circular;
+    if (this.props.mode) className += ` ${style[this.props.mode]}`;
+    if (this.props.multicolor) className += ` ${style.multicolor}`;
     if (this.props.className) className += ` ${this.props.className}`;
-    if (this.props.mode) className += ` ${this.props.mode}`;
-    if (this.props.multicolor) className += ` multicolor`;
 
     return (
       <div
diff --git a/components/progress_bar/style.scss b/components/progress_bar/style.scss
new file mode 100644
index 00000000..8bc107c9
--- /dev/null
+++ b/components/progress_bar/style.scss
@@ -0,0 +1,143 @@
+@import "../variables";
+
+$progress-height: .5 * $unit;
+$progress-main-color: unquote("rgb(#{$color-primary})") !default;
+$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
+$circle-wrapper-width: 60;
+$circle-radius: 25;
+$scale-ratio: $circle-radius / 20;
+
+.linear {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: $progress-height;
+  overflow: hidden;
+  background: $color-divider;
+
+  &.indeterminate .value {
+    transform-origin: center center;
+    animation: linear-indeterminate-bar 1s linear infinite;
+  }
+}
+
+.value, .buffer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transform: scaleX(0);
+  transform-origin: left center;
+}
+
+.value {
+  background-color: $progress-main-color;
+}
+
+.buffer {
+  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+                      linear-gradient(to right, $progress-main-color, $progress-main-color);
+}
+
+.circular {
+  position: relative;
+  display: inline-block;
+  width: $circle-wrapper-width * 1px;
+  height: $circle-wrapper-width * 1px;
+  transform: rotate(-90deg);
+
+  &.indeterminate {
+    .circle {
+      animation: circular-indeterminate-bar-rotate 2s linear infinite;
+    }
+
+    .path {
+      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
+      stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
+      stroke-dashoffset: 0;
+    }
+
+    &.multicolor .path {
+      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
+                       colors (1.5s * 4) ease-in-out infinite;
+    }
+  }
+}
+
+.circle {
+  width: 100%;
+  height: 100%;
+}
+
+.path {
+  transition: stroke-dasharray $animation-duration $animation-curve-default;
+  stroke-dasharray: 0, $scale-ratio * 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  stroke-miterlimit: 20;
+  stroke-width: 4;
+  stroke: $progress-main-color;
+  fill: none;
+}
+
+@keyframes linear-indeterminate-bar {
+  0% {
+    transform: translate(-50%) scaleX(0);
+  }
+
+  50% {
+    transform: translate(-0%) scaleX(.3);
+  }
+
+  100% {
+    transform: translate(50%) scaleX(0);
+  }
+}
+
+@keyframes circular-indeterminate-bar-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes circular-indeterminate-bar-dash {
+  0% {
+    stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * 0;
+  }
+
+  50% {
+    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * -35;
+  }
+
+  100% {
+    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * -124;
+  }
+}
+
+@keyframes colors {
+  0% {
+    stroke: #4285f4;
+  }
+
+  25% {
+    stroke: #de3e35;
+  }
+
+  50% {
+    stroke: #f7c223;
+  }
+
+  75% {
+    stroke: #1b9a59;
+  }
+
+  100% {
+    stroke: #4285f4;
+  }
+}
diff --git a/components/progress_bar/style.styl b/components/progress_bar/style.styl
deleted file mode 100644
index 9b7235f8..00000000
--- a/components/progress_bar/style.styl
+++ /dev/null
@@ -1,105 +0,0 @@
-@import '../constants'
-
-CIRCLE_WRAPPER_WIDTH         = 60  // You need to change cx and cy in markup too
-CIRCLE_RADIUS                = 25  // You need to change r in the markup too
-SCALE_RATIO                  = CIRCLE_RADIUS/20
-
-// -- Linear progress bar
-:local(.linearBar)
-  display                    : inline-block
-  position                   : relative
-  height                     : PROGRESS_BAR_HEIGHT
-  width                      : 100%
-  background                 : darken(BACKGROUND, 7.5%)
-  overflow                   : hidden
-
-:local(.valueBar), :local(.bufferBar)
-  position                   : absolute
-  bottom                     : 0
-  left                       : 0
-  right                      : 0
-  top                        : 0
-  transform                  : scaleX(0)
-  transform-origin           : left center
-  transition-duration        : ANIMATION_DURATION
-  transition-timing-function : ANIMATION_EASE
-
-:local(.valueBar)
-  background-color           : ACCENT
-
-:local(.bufferBar)
-  background-color           : alpha(ACCENT, 15%)
-
-:local(.linearBar).indeterminate :local(.valueBar)
-  transform-origin           : center center
-  animation                  : linear-indeterminate-bar 1s linear infinite
-
-// -- Circular progress bar
-:local(.circularBar)
-  display                    : inline-block
-  position                   : relative
-  height                     : CIRCLE_WRAPPER_WIDTH * 1px
-  width                      : CIRCLE_WRAPPER_WIDTH * 1px
-  transform                  : rotate(-90deg)
-
-:local(.circle)
-  height                     : 100%
-  width                      : 100%
-
-:local(.circlePath)
-  stroke-dasharray           : 0, SCALE_RATIO * 200
-  stroke-dashoffset          : 0
-  stroke-linecap             : round
-  stroke-miterlimit          : 20
-  stroke-width               : 4
-  stroke                     : ACCENT
-  fill                       : none
-  transition                 : stroke-dasharray ANIMATION_DURATION ANIMATION_EASE
-
-:local(.circularBar).indeterminate
-  :local(.circle)
-    animation                : circular-indeterminate-bar-rotate 2s linear infinite
-
-  :local(.circlePath)
-    stroke-dasharray         : SCALE_RATIO * 1, SCALE_RATIO * 200
-    stroke-dashoffset        : 0
-    animation                : circular-indeterminate-bar-dash 1.5s ease-in-out infinite
-
-  &.multicolor :local(.circlePath)
-    animation                : circular-indeterminate-bar-dash 1.5s ease-in-out infinite, colors (1.5s*4) ease-in-out infinite
-
-// -- Animations
-@keyframes linear-indeterminate-bar
-  0%
-    transform                : translate(-50%) scaleX(0)
-  50%
-    transform                : translate(-0%) scaleX(0.3)
-  100%
-    transform                : translate(50%) scaleX(0)
-
-@keyframes circular-indeterminate-bar-rotate
-  100%
-    transform                : rotate(360deg)
-
-@keyframes circular-indeterminate-bar-dash
-  0%
-    stroke-dasharray         : SCALE_RATIO * 1, SCALE_RATIO * 200
-    stroke-dashoffset        : SCALE_RATIO * 0
-  50%
-    stroke-dasharray         : SCALE_RATIO * 89, SCALE_RATIO * 200
-    stroke-dashoffset        : SCALE_RATIO * -35
-  100%
-    stroke-dasharray         : SCALE_RATIO * 89, SCALE_RATIO * 200
-    stroke-dashoffset        : SCALE_RATIO * -124
-
-@keyframes colors
-  0%
-    stroke: #4285F4
-  25%
-    stroke: #DE3E35
-  50%
-    stroke: #F7C223
-  75%
-    stroke: #1B9A59
-  100%
-    stroke: #4285F4
diff --git a/spec/components/progress.jsx b/spec/components/progress.jsx
index 7bfb1c53..154ac5d4 100644
--- a/spec/components/progress.jsx
+++ b/spec/components/progress.jsx
@@ -43,14 +43,13 @@ export default React.createClass({
   render () {
     return (
       <section>
-        <h2>Progress bars</h2>
-
-        <p>Determinate</p>
-        <ProgressBar mode="determinate" value={this.state.progress} buffer={this.state.buffer}/>
-        <p>Indeterminate...</p>
-        <ProgressBar mode="indeterminate"/>
-        <p>Circular</p>
-        <ProgressBar type="circular" mode="indeterminate"/>
+        <h5>Progress bars</h5>
+        <p style={{margin: '10px auto'}}>Determinate</p>
+        <ProgressBar mode='determinate' value={this.state.progress} buffer={this.state.buffer}/>
+        <p style={{margin: '10px auto'}}>Indeterminate...</p>
+        <ProgressBar mode='indeterminate'/>
+        <p style={{margin: '10px auto'}}>Circular</p>
+        <ProgressBar type='circular' mode='indeterminate'/>
       </section>
     );
   }
diff --git a/spec/index.jsx b/spec/index.jsx
index bfed4078..19a7e421 100644
--- a/spec/index.jsx
+++ b/spec/index.jsx
@@ -7,12 +7,12 @@ import Checkbox from './components/checkbox';
 import Dialog from './components/dialog';
 import Drawer from './components/drawer';
 import Input from './components/input';
+import Progress from './components/progress';
 import RadioGroup from './components/radio_group';
 import Switch from './components/switch';
 // import Dropdown from './components/dropdown';
 // import FontIcon from './components/font_icon';
 // import Form from './components/form';
-// import Progress from './components/progress';
 // import Slider from './components/slider';
 // import Pickers from './components/pickers';
 // import Tabs from './components/tabs';
@@ -31,6 +31,7 @@ const Test = React.createClass({
         <Dialog />
         <Drawer />
         <Input />
+        <Progress />
         <RadioGroup />
         <Switch />
       </app>