diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 5a67a3c6df..943b1857b0 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -925,6 +925,18 @@ a.itemTag:hover {
     background-color: #52B54B;
 }
 
+.recordingProgressBar::-moz-progress-bar {
+    background-color: #cc3333;
+}
+
+.recordingProgressBar::-webkit-progress-value {
+    background-color: #cc3333;
+}
+
+.recordingProgressBar[aria-valuenow]:before {
+    background-color: #cc3333;
+}
+
 .userDataIcons .itemProgressBar {
     vertical-align: top;
     position: relative;
@@ -1012,9 +1024,9 @@ a.itemTag:hover {
 
 @media all and (min-height: 800px) {
 
-        .alphabetPicker a {
-            padding: 5px 0;
-        }
+    .alphabetPicker a {
+        padding: 5px 0;
+    }
 }
 
 @media all and (min-height: 900px) {
@@ -1054,4 +1066,4 @@ a.itemTag:hover {
     .viewCollageImage {
         width: 32.95%;
     }
-}
\ No newline at end of file
+}
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 2fcb33bd86..5070f74a6e 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -1532,6 +1532,12 @@
 
         getItemProgressBarHtml: function (item) {
 
+
+            if (item.Type == "Recording" && item.CompletionPercentage) {
+                
+                return '<progress class="itemProgressBar recordingProgressBar" min="0" max="100" value="' + item.CompletionPercentage + '"></progress>';
+            }
+            
             if (item.UserData && item.UserData.PlaybackPositionTicks && item.RunTimeTicks) {
 
                 var tooltip = Dashboard.getDisplayTime(item.UserData.PlaybackPositionTicks) + " / " + Dashboard.getDisplayTime(item.RunTimeTicks);