criação do algoritimo para aplica a Primeira parte para coloca o html

checkout/src/arquivos/js/components/Header.js

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 // import waitForEl from "../helpers/waitForEl";
 import { waitElement } from "m3-utils";
 
@@ -8,14 +9,43 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.progessBarHTML();
+        await this.progressBarProgress();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.herader = await waitElement (".headerCheckout")
+        this.progressBar = await waitElement ("#progressBar")
+("#my-element", {
             //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
             timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
             interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
         });
     }
+
+    progessBarHTML(){
+        // eslint-disable-next-line no-empty
+        if( this.progressBar && window.innerHeight > 1024){
+            this.progressBar.innerHTML = `
+
+            <ul>
+<li><div class="containerLi"><div><p class="progress-bar-text">Meu Carrinho</p><p id="pogress-bar-circle-1 class="progress-bar-circle-1"></p><p progress-bar-line-1></p></div></div>
+</li>
+<li class="central"><div class="containerLi"><div><p class="progress-bar-text">Meus Dados</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div>
+</li>
+<li><div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="pogress-bar-circle-3 class="progress-bar-circle-3"></p><p progress-bar-line-2></p></div></div>
+</li>
+
+
+            </ul>
+
+
+
+            `
+
+        }
+        if(this.progressBar && window.innerHeight <= 1024){
+            this.progressBar.innerHTML = ``;
+        }
+    }
 }