diff --git a/doccano/app/server/static/annotation.1.js b/doccano/app/server/static/annotation.1.js
index 70d37fb0..93715d0b 100644
--- a/doccano/app/server/static/annotation.1.js
+++ b/doccano/app/server/static/annotation.1.js
@@ -143,6 +143,22 @@ var vm = new Vue({
     computed: {
         done: function () {
             return this.total - this.remaining
+        },
+        achievement: function () {
+            if (this.total == 0) {
+                return 0;
+            } else {
+                return (this.total - this.remaining) / this.total * 100
+            }
+        },
+        progressColor: function () {
+            if (this.achievement < 30) {
+                return 'is-danger'
+            } else if (this.achievement < 70) {
+                return 'is-warning'
+            } else {
+                return 'is-primary'
+            }
         }
     }
 });
\ No newline at end of file
diff --git a/doccano/app/server/templates/annotation.1.html b/doccano/app/server/templates/annotation.1.html
index 15756353..bfc8b29c 100644
--- a/doccano/app/server/templates/annotation.1.html
+++ b/doccano/app/server/templates/annotation.1.html
@@ -14,7 +14,7 @@
                 </p>
                 <ul class="menu-list">
                     <li>
-                        <progress class="progress is-primary" value="15" max="100">30%</progress>
+                        <progress class="progress" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
                     </li>
 
                 </ul>