Add top bar with list of steps.

resources/js/components/Evaluations/Single/Components/Steps.vue

 <template>
-    <div>
-        Barre du haut qui montre ou on en est
-        Etape {{ evaluation.current_step }} sur 5
-    </div>
+        <div class="row">
+            <div class="col" v-for="step in steps">
+                <div class="step-done" v-if="evaluation.current_step > step.num">
+                    <div class="checkmark">
+                        <i class="fas fa-check bg-success"></i>
+                    </div>
+                    <span class="line bg-success" v-if="step.num <= 4"></span>
+                    <div class="text-sm">
+                        {{step.title}} - Terminé
+                    </div>
+                    <div>
+                        {{step.name}}
+                    </div>
+                </div>
+                <div class="step-done" v-if="evaluation.current_step === step.num">
+                    <div class="checkmark" >
+                        <i class="fas fa-spinner bg-info"></i>
+                    </div>
+                    <span class="line bg-info" v-if="step.num <= 4"></span>
+                    <div class="text-sm">
+                        {{step.title}} - En cours
+                    </div>
+                    <div>
+                        {{step.name}}
+                    </div>
+                </div>
+                <div class="step-done" v-if="evaluation.current_step < step.num">
+                    <div class="checkmark">
+                        <i class="fas fa-lock bg-primary text-white"></i>
+                    </div>
+                    <span class="line bg-primary" v-if="step.num <= 4"></span>
+                    <div class="text-sm">
+                        {{step.title}} - En attente
+                    </div>
+                    <div>
+                        {{step.name}}
+                    </div>
+                </div>
+            </div>
+        </div>
 </template>
 
 <script>
 export default {
     name: 'EvaluationSteps',
     props: ['evaluation'],
+    data() {
+        return {
+            steps: [
+                {
+                    num: 1,
+                    name: 'Dangers',
+                    title: 'Étape 1',
+                },
+                {
+                    num: 2,
+                    name: 'Mesures de sécurité',
+                    title: 'Étape 2',
+                },
+                {
+                    num: 3,
+                    name: 'Synthèse des mesures de sécurité',
+                    title: 'Étape intermédiaire',
+                },
+                {
+                    num: 4,
+                    name: 'Plan d\'action',
+                    title: 'Étape 3',
+                },
+                {
+                    num: 5,
+                    name: 'Mesurer la maturité cyber',
+                    title: 'Étape 4',
+                },
+            ]
+        }
+    }
 }
 </script>
+
+<style scoped>
+.checkmark {
+    position: relative;
+}
+.checkmark i {
+    font-size: 1.2rem;
+    border-radius: 50%;
+    padding: 0.4rem;
+    width: 2.2rem;
+    text-align: center;
+    line-height: 1.4rem;
+    height: 2.2rem;
+    color: white;
+}
+.line {
+    position: absolute;
+    display: block;
+    top: 1rem;
+    left: 4rem;
+    right: 0.8rem;
+    height: 2px;
+}
+</style>