progress docs

pages/_data/docs.yml

@@ -12,6 +12,7 @@
 - page: form-elements
 - page: form-helpers
 - page: input-mask
+- page: progress
 - page: ribbons
 - page: spinners
 - page: steps

pages/_docs/progress.md

+---
+title: Progress
+description: A progress bar can be used to show a user how far along he is in a process.
+---
+
+### Default markup
+
+To create a default progress bar, add a `.progress` class to a `<div>` element:
+
+{% example html %}
+{% include ui/progress.html %}
+{% endexample %}

pages/_includes/ui/progress.html

-<div class="progress {% if include['size'] %}progress-{{ include['size'] }}{% endif %}{{ include.class }}">
-	<div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}"{% if include.percentage %} style="width: {{ include.percentage }}%"{% endif %} role="progressbar" aria-valuenow="{{ include.percentage | default: 0}}" aria-valuemin="0" aria-valuemax="100"></div>
+{% assign percentage = include.percentage | default: 38 %}
+<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %}{{ include.class }}{% endif %}">
+	<div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">
+      <span class="sr-only">{{ percentage }}% Complete</span>
+   </div>
 </div>