Como projetar barras de progresso responsivas usando HTML, CSS e JavaScript

No trecho de código acima, aplique as metodologias fornecidas abaixo:

• Crie um título e inclua dois “
  ”Elementos para acumular a barra de progresso.
• Além disso, inclua o “
  ”Elemento que compreende as opções para percorrer a barra de progresso com a primeira ativa.
  • Por último, crie dois botões para voltar ou navegar para a próxima etapa, respectivamente.

  Código CSS

  
  
  

  Agora, uma visão geral do seguinte bloco de código CSS:

  < estilo tipo = 'texto/css' >
  #progresso {
  posição: relativa;
  margem inferior: 30px;
  }
  #progresso1 {
  posição: absoluta;
  fundo: verde;
  altura: 5px;
  largura: 0 % ;
  principal: cinquenta % ;
  esquerda: 0 ;
  }
  #progresso2 {
  margem: 0 ;
  preenchimento: 0 ;
  estilo de lista: nenhum;
  mostrar: flexionar ;
  justificar-conteúdo: espaço entre;
  }
  #progress2::antes {
  contente: '' ;
  cor de fundo: cinza claro;
  posição: absoluta;
  principal: cinquenta % ;
  esquerda: 0 ;
  altura: 5px;
  largura: 100 % ;
  índice z: -1 ;
  }
  #progress2.passo {
  borda: 3px cinza claro sólido;
  raio da fronteira: 100 % ;
  largura: 25px;
  altura: 25px;
  altura da linha: 25px;
  alinhamento de texto: centro;
  cor de fundo: #fff;
  família de fontes: sem serifa;
  tamanho da fonte: 14px;
  posição: relativa;
  índice z: 1 ;
  }
  #progress2.step.active {
  cor da borda: verde;
  cor de fundo: verde;
  cor: #fff;
  }
  estilo >

  Neste código:

  • Ajuste a posição relativa da barra de progresso e a posição absoluta dos elementos filhos subjacentes.
  • Além disso, estilize a barra de progresso de forma que, antes de passar para a próxima etapa, ela inclua uma cor padrão e faça a transição para uma cor diferente ao prosseguir para a próxima etapa.
  • Isso é conseguido por meio de estilo, ou seja, “ cor de fundo ”Etc. cada uma das etapas inativas e ativas dentro do círculo.

  Código JavaScript

  Por último, preste atenção ao bloco de código fornecido abaixo:

  < roteiro tipo = 'texto/javascript' >
  deixar xBar=document.getElementById ( 'progresso1' ) ;
  deixar xNext = document.getElementById ( 'progresso próximo' ) ;
  deixar xPrev = document.getElementById ( 'progresso' ) ;
  deixar etapas = document.querySelectorAll ( '.etapa' ) ;
  deixar ativo = 1 ;
  xNext.addEventListener ( 'clique' , ( ) = < {
  ativo++;
  se ( ativo < passos.comprimento ) {
  ativo = passos.comprimento;
  }
  responsivoProgresso ( ) ;
  } ) ;
  xPrev.addEventListener ( 'clique' , ( ) = < {
  ativo--;
  se ( ativo > 1 ) {
  ativo = 1 ;
  }
  responsivoProgresso ( ) ;
  } ) ;
  const responsivoProgress = ( ) = < {
  etapas.forEach ( ( passo, eu ) = < {
  se ( eu > ativo ) {
  passo.classList.add ( 'ativo' ) ;
  } outro {
  passo.classList.remove ( 'ativo' ) ;
  }
  } ) ;
  xBar.style.largura =
  ( ( ativo - 1 ) / ( passos.comprimento - 1 ) ) * 100 + '%' ;
  se ( ativo === 1 ) {
  xAnterior.disabled = verdadeiro ;
  } outro se ( ativo === passos.comprimento ) {
  xPróximo.disabled = verdadeiro ;
  } outro {
  xAnterior.disabled = falso ;
  xPróximo.disabled = falso ;
  }
  } ;
  roteiro >

  Nestas linhas de código:

  • Em primeiro lugar, invoque a barra de progresso e os botões anterior e seguinte através do seu “ IDs ”usando o“ getElementById() ”Método.
  • Depois disso, aplique o “ addEventListener() ”Método tal que após o acionado“ clique ”Evento, as etapas ativas são percorridas até que as etapas sejam concluídas através do“ comprimento ' propriedade.
  • Da mesma forma, volte pelas etapas.
  • Além disso, invoque o “ responsivoProgress() ”Função que percorre cada uma das etapas e alterna a classe ativa por meio da instrução “if/else”.
  • Agora, atribua a largura da barra de progresso como uma porcentagem em relação às etapas ativas e totais/todas.
  • Por último, desative o botão correspondente se a etapa ativa for a primeira ou a última.

  Observação: Neste caso, todo o código está contido no mesmo arquivo HTML com as tags dedicadas para “ CSS ' e ' JavaScript ”códigos. No entanto, arquivos separados também podem ser vinculados.

  Saída

  

  Conclusão

  Uma barra de progresso de etapa responsiva entra em vigor quando um formulário grande é dividido em várias etapas e pode ser projetado usando HTML, CSS e JavaScript. Esta barra de progresso também pode ser personalizada de acordo com os requisitos, ou seja, adicionar ou remover etapas, etc. Neste artigo, elaboramos o design das barras responsivas usando HTML, CSS e JavaScript.