Basic pie chart beginnings

board/templates/board/employee_list.html

@@ -11,6 +11,12 @@
             <small>Hire date: {{employee.hire_date|date:"SHORT_DATE_FORMAT"}}</small><br>
             <small>Department: {{employee.department}}</small>
         </p>
+        <div class="pie_chart" type="pie" percent="0%">
+            <svg viewBox="0 0 64 64">
+                <circle class="pie" r="32" cx="32" cy="32" style="stroke-width: 64;"></circle>
+                <circle class="slice" r="32" cx="32" cy="32" style="stroke-width: 64;stroke-dasharray: 0 201.06192982974676;"></circle>
+            </svg>
+        </div>
         {% endfor %}
     </section>
     <section>

static/styles/main.css

@@ -3,6 +3,7 @@
     --black: #393d3f;
     --grey: #a7b4bb;
     --blue: #10638c;
+    --light-blue: #74c0e6;
     --red: #8c1016;
 }
 
@@ -343,3 +344,37 @@ hgroup {
     column-gap: 0.5rem;
     margin-bottom: 1rem;
 }
+
+
+
+
+
+.pie_chart {
+    display: inline-block;
+    width: 1.125em;
+    height: 1.125em;
+}
+
+
+circle.pie {
+    fill: rgba(255,255,255,0);
+    stroke: var(--light-blue);
+}
+
+circle.slice {
+    fill: rgba(255,255,255,0);
+    stroke: var(--blue);
+}
+
+svg {
+    border-radius: 50%;
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}