diff --git a/amd/src/report-viewer-components.js b/amd/src/report-viewer-components.js
index 026d6a3..daf14f0 100644
--- a/amd/src/report-viewer-components.js
+++ b/amd/src/report-viewer-components.js
@@ -69,6 +69,11 @@ export default {
                     type: Number,
                     default: 0.2,
                 },
+                title: {
+                    type: String,
+                    default: "",
+                },
+
             },
             data() {
                 return {
@@ -81,44 +86,40 @@ export default {
                 },
                 fraction(){
                     if(this.max - this.min == 0){
-                        return 1;
-                        // 0 size is always full :)
+                        return 0;
+                        // 0 size is always empty :)
                     } else {
                         return (this.value - this.min)/(this.max - this.min);
                     }
                 },
-                center() {
-                    const x = (1+this.stroke)*50;
-                    const y = x;
-                    return { 'x' : x, 'y' : y };
+                radius() {
+                    return 50 - (50*this.stroke);
                 },
-                size() {
-                    const w = (1+this.stroke)*100;
-                    const h = w;
-                    return { 'h' : h, 'w' : w };
-                }
-            },
-            methods: {
-                arcpath(cx, cy, r) {
-                    let fraction = 1; 
+                arcpath() {
+                    let fraction = 0; 
+                    const r = 50 - (50*this.stroke);
                     if(this.max - this.min != 0){
                         fraction = (this.value - this.min)/(this.max - this.min);
                     }
 
                     const Δ = fraction * 2*π;
-                    return svgarcpath([cx,cy],[r,r],[0,Δ],270);
+                    return svgarcpath([50,50],[r,r],[0,Δ], 1.5*π);
                 },
             },
+            methods: {
+            },
             template: `
-            <span class='r-progress-circle'><svg 
-                    :width="(1+stroke)+'em'" 
-                    :height="(1+stroke)+'em'" 
-                    :viewbox="'0 0 '+ size.w + ' '+size.h">
-                    <circle :cx="center.x" :cy="center.y" :r="50" 
+            <svg width="1em" height="1em" viewBox="0 0 100 100">
+                <title>{{title}}</title>
+                <circle v-if="fraction >= 1.0" cx="50" cy="50" :r="radius" 
+                    :style="'opacity: 1; stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
+                <g v-else>
+                    <circle cx="50" cy="50" :r="radius" 
                         :style="'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
-                    <path :d="arcpath(center.x,center.y,50)" 
+                    <path :d="arcpath" 
                         :style="'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'"/>
-            </svg></span>
+                </g>
+            </svg>
             `,
         });
 
@@ -630,6 +631,7 @@ export default {
                                 :max='value.course.completion.count'
                                 :min='0'
                                 :class="'r-course-result r-completion-'+value.completion"
+                                :title="text['completion_'+value.completion]"
                             ></r-progress-circle>
                             <i  v-else v-b-popover.top 
                                 :class="'r-course-result fa fa-'+completion_icon(value.completion)+
@@ -853,8 +855,12 @@ export default {
                 <template v-for='cgroup in value.conditions'>
                     <tr>
                         <th colspan='2'>{{cgroup.title}}</th>
-                        <th><i :class="'fa fa-'+completion_icon(cgroup.status)+' r-completion-'+cgroup.status"
-                        :title="text['completion_'+cgroup.status]"></i></th>
+                        <th><r-progress-circle 
+                                :value='cgroup.progress'
+                                :max='cgroup.count'
+                                :class="'r-completion-'+cgroup.status"
+                                :title="text['completion_'+cgroup.status]"
+                            ></r-progress-circle></th>
                     </tr>
                     <tr v-for='ci in cgroup.items'>
                         <td><span v-if='guestmode'>{{ci.title}}</span>
diff --git a/classes/corecompletioninfo.php b/classes/corecompletioninfo.php
index e919f16..7df0793 100644
--- a/classes/corecompletioninfo.php
+++ b/classes/corecompletioninfo.php
@@ -113,7 +113,9 @@ class corecompletioninfo {
             "type" => new \external_value(PARAM_TEXT, 'completion type name'),
             "aggregation" => new \external_value(PARAM_TEXT, 'completion aggregation for this type ["all","any"]'),
             "completed" => new \external_value(PARAM_BOOL, 'current completion value for this type'),
-            "status" => new \external_value(PARAM_TEXT, 'extended completion status ["incomplete","progress","complete", "complete-pass","complete-fail"]')
+            "status" => new \external_value(PARAM_TEXT, 'extended completion status ["incomplete","progress","complete", "complete-pass","complete-fail"]'),
+            "progress" => new \external_value(PARAM_INT, 'completed sub-conditions'),
+            "count" => new \external_value(PARAM_INT, 'total number of sub-conditions'),
          ], 'completion type',$value);
     }
 
@@ -247,9 +249,14 @@ class corecompletioninfo {
                         "items" => [],
                     ];
 
+                    $progress = 0;
                     foreach($completions as $completion){
                         $criteria = $completion->get_criteria();
 
+                        if($completion->is_complete()) {
+                            $progress += 1; // Add a point to the progress counter
+                        } 
+
                         $iinfo = [
                             "id" => $criteria->id,
                             "title" => $criteria->get_title_detailed(),
@@ -293,6 +300,20 @@ class corecompletioninfo {
                         // finally add the item to the items list
                         $cinfo["items"][] = $iinfo;
                     }
+
+                    // Set the count and progress stats based on the Type's aggregation style
+                    if($typeaggregation == COMPLETION_AGGREGATION_ALL){
+                        // Count and Progress amount to the sum of items
+                        $cinfo["count"] = count($cinfo["items"]);
+                        $cinfo["progress"] = $progress;
+                    }
+                    else { //$typeaggregation == COMPLETION_AGGREGATION_ANY
+                        // Count and progress are either 1 or 0, since any of the items
+                        // complete's the type
+                        $cinfo["count"] = (count($cinfo["items"]) > 0)?1:0;
+                        $cinfo["progress"] = ($progress>0)?1:0;
+                    }
+
                     $info['conditions'][] = $cinfo;
                     $info['pending'] = $anypending;
                 }
diff --git a/css/devstyles.css b/css/devstyles.css
index e1f5c74..bf71ccc 100644
--- a/css/devstyles.css
+++ b/css/devstyles.css
@@ -674,26 +674,25 @@ a.t-item-course-config {
 }
 
 .r-item-start.completion-incomplete i,
-i.r-completion-incomplete {
+.r-completion-incomplete {
     color: #7f7f7f;
 }
-i.r-completion-progress {
+.r-completion-progress {
     color: rgb(139, 107, 0);
 }
-i.r-completion-completed, i.r-completion-complete-pass {
+.r-completion-completed, .r-completion-complete-pass {
     color: rgb(0, 126, 0);
 }
-i.r-completion-good {
+.r-completion-good {
     color: #398;
 }
-i.r-completion-excellent, i.r-completion-complete {
+.r-completion-excellent, .r-completion-complete {
     color: rgb(0, 103, 255);
 }
-i.r-completion-pending {
+.r-completion-pending {
     color: #7f7f7f;
 }
-
-i.r-completion-failed, i.r-completion-complete-fail {
+.r-completion-failed, .r-completion-complete-fail {
     color: #933;
 }