docs(md-progress-circle): Add README.

Closes #184

Author: josephperrott

src/components/progress-circle/README.md

@@ -0,0 +1,51 @@
+# md-progress-circle
+
+`md-progress-circle` is a component for indicating progress and activity, matching the spec of 
+[Material Design Progress & Activity](https://http://www.google.com/design/spec/components/progress-activity.html).
+
+### Progress Modes
+
+There are two modes:
+ 1. Determinate - `<md-progress-circle mode="determinate">`
+    * Indicates how long an operation will take when the percentage complete is detectable. 
+ 2. Indeterminate - `<md-progress-circle mode="indeterminate">` or `<md-spinner>`
+    * Indicates the user must wait while something finishes when it’s not necessary or possible to indicate how long it
+      will take.
+
+Example:
+
+ ```html
+<md-progress-circle mode="determinate" value="myValue"></md-progress-circle>
+<md-progress-circle mode="indeterminate"></md-progress-circle>
+<md-spinner></md-spinner>
+ ```
+
+### Theming
+
+All progress indicators can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the appropriate class.
+
+Example:
+
+ ```html
+<md-progress-circle mode="indeterminate" color="primary"></md-progress-circle>
+<md-progress-circle mode="indeterminate" color="accent"></md-progress-circle>
+<md-progress-circle mode="indeterminate" color="warn"></md-progress-circle>
+ ```
+
+### Accessibility
+
+ * ARIA attributes are applied to the indicator defining the valuemin, valuemax and valuenow attributes.
+
+### Upcoming work
+
+ * Adding ARIA attribute for progressbar "for".
+
+### API Summary
+
+Properties:
+
+| Name      | Type                              | Description |
+| ---       | ---                               | --- |
+| `color`   | `"primary"|"accent"|"warn"`       | The color palette of the progress indicator |
+| `mode`    | `"determinate"|"indeterminate"`   | The mode of the progress indicator |
+| `value`   | number                            | The current progress percentage for determinate indicators |

src/components/progress-circle/progress-circle.scss

@@ -63,12 +63,12 @@ $md-progress-circle-viewport-size : 100px !default;
   }
 
 
-  &.md-accent circle {
+  &[color="accent"] circle {
     stroke: md-color($md-accent, 600);
   }
 
 
-  &.md-warn circle {
+  &[color="warn"] circle {
     stroke: md-color($md-warn, 600);
   }
 

src/demo-app/progress-circle/progress-circle-demo.html

@@ -1,10 +1,10 @@
 <h1>Determinate</h1>
 <div class="demo-progress-circle">
-    <md-progress-circle mode="determinate"
-                        [value]="progressValue"
-                        class="md-primary"></md-progress-circle>
-    <md-progress-circle [value]="progressValue"
-                        class="md-accent"></md-progress-circle>
+  <md-progress-circle mode="determinate"
+                      [value]="progressValue"
+                      class="md-primary"></md-progress-circle>
+  <md-progress-circle [value]="progressValue"
+                      color="accent"></md-progress-circle>
 </div>
 <span>Value: {{progressValue}}</span>
 <button md-raised-button (click)="step(10)">Increase</button>
@@ -14,8 +14,8 @@ <h1>Determinate</h1>
 
 <h1>Indeterminate</h1>
 <div class="demo-progress-circle">
-    <md-progress-circle mode="indeterminate"></md-progress-circle>
-    <md-progress-circle mode="indeterminate"
-                        class="md-accent"></md-progress-circle>
-    <md-spinner></md-spinner>
+  <md-progress-circle mode="indeterminate"></md-progress-circle>
+  <md-progress-circle mode="indeterminate"
+                      color="accent"></md-progress-circle>
+  <md-spinner></md-spinner>
 </div>