diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
index 7e7cfd52e5..8cc7300401 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogresscircle.directive.js
@@ -42,7 +42,7 @@ Use this directive to render a circular progressbar.
 
 
                 // centering text for all sizes
-                var text = element.find(".umb-tour__values");
+                var text = element.find(".umb-progress-circle__percentage");
                 
                 text.css({ "line-height": scope.size + "px" });
                 console.log("this is the size:", scope.size);
@@ -58,7 +58,7 @@ Use this directive to render a circular progressbar.
                 }
 
                 // calculating the circle's highlight
-                var circle = element.find(".umb-tour__progress-circle");
+                var circle = element.find(".umb-progress-circle__highlight");
                 var r = circle.attr('r');
                 var strokeDashArray = (r*Math.PI)*2;
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
index 37c422b0c5..f9d9b134fe 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-circle.less
@@ -1,4 +1,8 @@
-.umb-tour__progress {
+.umb-progress-circle__container {
+    position: relative;
+}
+
+.umb-progress-circle__view-box {
     position: absolute;
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
@@ -7,59 +11,55 @@
     transform: rotate(-90deg);
 }
 
-.umb-tour__progress-container {
-    position: relative;
-}
-
 // circle highlight on progressbar
-.umb-tour__progress-circle {
+.umb-progress-circle__highlight {
     stroke: @green;
 }
 
-.umb-tour__progress-circle--green {
+.umb-progress-circle__highlight--green {
     stroke: @green;
 }
 
-.umb-tour__progress-circle--red {
+.umb-progress-circle__highlight--red {
     stroke: @red;
 }
 
-.umb-tour__progress-circle--yellow {
+.umb-progress-circle__highlight--yellow {
     stroke: @yellow;
 }
 
-.umb-tour__progress-circle--purple {
+.umb-progress-circle__highlight--purple {
     stroke: @purple;
 }
 
 // circle progressbar bg
-.umb-tour__progress-circle-bg {
+.umb-progress-circle__bg {
     stroke: @gray-8;
 }
 
 // the text in the center
-.umb-tour__values {
+.umb-progress-circle__percentage {
     font-size: 16px;
     font-weight: 700;
     text-align: center;
 }
 
-.umb-tour__values--xs{
+.umb-progress-circle__percentage--xs{
     font-size: 12px;
 }
 
-.umb-tour__values--s{
+.umb-progress-circle__percentage--s{
     font-size: 14px;
 }
 
-.umb-tour__values--m{
+.umb-progress-circle__percentage--m{
     font-size: 16px;
 }
 
-.umb-tour__values--l{
+.umb-progress-circle__percentage--l{
     font-size: 18px;
 }
 
-.umb-tour__values--xl{
+.umb-progress-circle__percentage--xl{
     font-size: 20px;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
index 3facbf3009..74aaf52599 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
@@ -1,9 +1,9 @@
 <div>
-    <div class="umb-tour__progress-container" ng-style="{'width': size, 'height': size }">                    
-        <svg class="umb-tour__progress" viewBox="0 0 100 100">
-            <circle class="umb-tour__progress-circle-bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
-            <circle class="umb-tour__progress-circle umb-tour__progress-circle--{{ strokeColor }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
+    <div class="umb-progress-circle__container" ng-style="{'width': size, 'height': size }">                    
+        <svg class="umb-progress-circle__view-box" viewBox="0 0 100 100">
+            <circle class="umb-progress-circle__bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
+            <circle class="umb-progress-circle__highlight umb-progress-circle__highlight--{{ strokeColor }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
         </svg>
-        <div class="umb-tour__values umb-tour__values--{{ fontSize }}"> {{ percentage }}%</div>
+        <div class="umb-progress-circle__percentage umb-progress-circle__percentage--{{ fontSize }}"> {{ percentage }}%</div>
     </div>
 </div>
\ No newline at end of file