Criação de Componente de Barra de Progresso

[Alecell]

Describe the feature
Desenvolvimento de uma barra de progresso controlada e personalizável para o projeto PetDex.

Description

Implementar uma barra de progresso controlada que aceite propriedades `min`, `max`, e `value`. Deverá permitir a personalização de estilos como cor, altura e largura por meio de SCSS, oferecendo flexibilidade para diferentes usos no projeto.

Use Case

A barra de progresso será usada para indicar o carregamento ou a conclusão de tarefas, melhorando a experiência do usuário ao fornecer feedback visual imediato.

Implementation Details

O componente deve ser desenvolvido utilizando HTML, SASS e JavaScript, assegurando que seja possível sobrescrever estilos por meio de classes SCSS. A transição do progresso deve ser suave e bem animada para melhorar a usabilidade.

Visual Concepts

Confira o layout no Figma para visualizar o componente: Layout PetDex.

Additional Information

A implementação deve ser consistente com a identidade visual do PetDex e seguir as melhores práticas de acessibilidade web.

Perguntas Pendentes:

• A barra de progresso deve interagir com outros componentes ou triggers na aplicação?

Recomendações:

• Realize testes cruzados para garantir que a personalização funcione corretamente em diferentes navegadores.
• Verifique o uso correto das propriedades de acessibilidade, como aria-valuenow, aria-valuemin e aria-valuemax.

[MilaPassos]

Eu quero!!!

[Alecell]

Ponto: 21

[lemoscaio]

Deixar uma dica já de um jeito de chegar numa barrinha legal:

A ideia é fazer uma div que vai representar o fundo e uma div dentra que vai representar o preenchimento da barra.
Utilizando o position: absolute você consegue manipular a posição em relação à div com position: relative acima.

<div class="progress-bar-background" style="position: relative">
   <div class="progress-bar-foreground" style=`width:${progress}; position: absolute`></div>
</div>

PS: Peço perdão se as tags não estiverem com a sintaxe certinha.

Referência de vídeo que mostra a aplicação desse conceito na prática já no tempo exato:

https://youtu.be/yP5DKzriqXA?si=B4JXf3j7E9RJPyDB&t=17682

[JonySamarelli]

Eu quero!!!