diff --git a/pages/_data/docs.yml b/pages/_data/docs.yml
index 9e1d977fffb68664d7143ef04c5e6702cc6258c3..fc95a967da426b373021509c4fac658e2d6183e5 100644
--- a/pages/_data/docs.yml
+++ b/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
diff --git a/pages/_docs/progress.md b/pages/_docs/progress.md
new file mode 100644
index 0000000000000000000000000000000000000000..1e82802f97127c963b182861e4ed5dab7e4c4d07
--- /dev/null
+++ b/pages/_docs/progress.md
@@ -0,0 +1,12 @@
+---
+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 %}
diff --git a/pages/_includes/ui/progress.html b/pages/_includes/ui/progress.html
index 01034f2e615132403563b023caf411ce474b2d29..d661e96360bf6ca409dc69d72430941e99a19948 100644
--- a/pages/_includes/ui/progress.html
+++ b/pages/_includes/ui/progress.html
@@ -1,3 +1,6 @@
-<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>