Com a ajuda do HTML e CSS, os desenvolvedores podem mostrar seu trabalho criando uma barra de progresso. Basicamente, é usado para ver o progresso do projeto de desenvolvimento atual ou de qualquer item. Além disso, vários métodos estão disponíveis no HTML para criar uma barra de progresso com a ajuda da tag "", que é utilizada para exibir um indicador mostrando o progresso da conclusão de uma tarefa. Além disso, você pode fazer uma barra de progresso através de várias propriedades CSS.

Este post explicará:

• O que é uma barra de progresso?
• Método 1: Como criar uma barra de progresso utilizando uma tag html?
• Método 2: Como criar uma barra de progresso utilizando as propriedades CSS?

O que é uma barra de progresso?

Uma barra de progresso é utilizada para representar um elemento de controle gráfico usado para conceituar o status de uma operação aprimorada do computador.

Método 1: Como criar uma barra de progresso utilizando uma tag html?

Para fazer uma barra de progresso com a ajuda do HTML, observe as instruções abaixo.

Etapa 1: Crie um contêiner div
Primeiro, crie um recipiente de div usando o “”Tag e especifique uma classe com um nome de acordo com sua escolha.

Etapa 2: Adicionar cabeçalho
Insira um título com a ajuda do “

”Tag e adicione texto para o cabeçalho entre a tag de cabeçalho.

Etapa 3: Crie Barra de Progresso
Agora, adicione um “”Tag para criar a barra de progresso. Além disso, especifique um “valor”Da barra de progresso que está em andamento, e o“máx”O atributo é utilizado para definir o tamanho máximo da barra de progresso:

Em andamento

Pode -se observar que criamos com sucesso uma barra de progresso:

Método 2: Como criar uma barra de progresso utilizando as propriedades CSS?

Para criar uma barra de progresso com CSS, experimente o procedimento mencionado.

Etapa 1: faça um contêiner div
Primeiro de tudo, faça um contêiner div usando o “" marcação. Além disso, adicione uma aula com um nome específico dentro da etiqueta de abertura.

Etapa 2: Crie outro contêiner div
Em seguida, crie outro contêiner entre o primeiro contêiner da Div:

Etapa 3: Access Div Container Class
Acesse a classe de contêiner Div com a ajuda do seletor de pontos e o nome da classe como “.ProgressBar-Div”E aplique as propriedades mencionadas:

.ProgressBar-Div
Radio de fronteira: 10px;
preenchimento: 3px;
margem: 50px;
Background-Color: RGB (12, 4, 2);

Aqui:

• ““Radio de fronteiraA propriedade define o raio do elemento da borda da borda externa. Os usuários podem definir um único raio para fazer cantos circulares.
• ““preenchimento”Especifica o espaço dentro da borda definida ao redor do elemento.
• ““margem”Propriedade especifica um espaço fora do limite definido.
• ““cor de fundo”É utilizado para definir uma cor para o fundo do elemento.

Etapa 4: Faça uma barra de progresso
Acesse o contêiner interno da div e estilize -o da seguinte forma:

.ProgressBar-Div> div
cor de fundo: RGB (210, 233, 5);
largura: 50%;
Altura: 30px;
Radio de fronteira: 12px;

No bloco de código acima:

• O "largura”A propriedade é utilizada para definir o tamanho do elemento horizontalmente.
• Próximo, "altura”É utilizado para alocar a altura do elemento.
• ““Radio de fronteira”Propriedade usada para criar os cantos arredondados.

Saída

Isso se tratava de criar a barra de progresso com HTML e CSS.

Conclusão

Para criar uma barra de progresso com o HTML e o CSS, primeiro, crie um contêiner Div aninhado e adicione o “" elemento. Em seguida, estilize o primeiro contêiner de div, aplicando as propriedades CSS, incluindo “Radio de fronteira","preenchimento","margem","fundo", e "cor”. Em seguida, estilize o div interior para fazer uma barra de progresso usando o “largura","altura", e "Radio de fronteira”. Este post explicou fazer a barra de progresso com HTML e CSS.