Add native progress

Author: m-aciek

style.css

@@ -14,18 +14,10 @@ th, td {
 th {
   background-color: #f4f4f4;
 }
-.progress-bar {
-  background-color: #4caf50;
-  color: white;
-  height: 20px;
-  line-height: 20px;
-  text-align: center;
-  overflow: hidden;
-  white-space: nowrap;
-  min-width: 50px;
-  box-sizing: border-box;
+progress {
+  width: 100%;
 }
-td[data-label="visitors"], td[data-label="translators"] {
+td[data-label="visitors"], td[data-label="translators"], td[data-label="completion-number"] {
   text-align: right;
 }
 td[data-label="completion"] {
@@ -59,8 +51,4 @@ td[data-label="completion"] {
   td[data-label="completion"] {
     width: inherit;
   }
-  .progress-bar {
-    min-width: 0;
-    width: 100% !important;
-  }
 }

template.html.jinja

@@ -13,7 +13,7 @@
   <th>build</th>
   <th><a href="https://plausible.io/data-policy#how-we-count-unique-users-without-cookies" target="_blank">visitors</a></th>
   <th>translators</th>
-  <th>completion</th>
+  <th colspan="2">completion</th>
 </tr>
 </thead>
 <tbody>
@@ -46,8 +46,11 @@
     {{ translators }}
     {% if translators_link %}</a>{% endif %}
   </td>
-  <td data-label="completion">
-    <div class="progress-bar" style="width: {{ completion | round(2) }}%;">{{ completion | round(2) }}%</div>
+  <td data-label="completion-number">
+    {{ completion | round(2) }}%
+  </td>
+  <td data-label="completion-bar">
+    <progress value="{{ completion }}" max="100"></progress>
   </td>
 </tr>
 {% endfor %}