Requisitos: Encontraremos o uso de várias barras de progresso durante o desenvolvimento, porque existem várias barras de progresso nos plug-ins atuais. Para facilitar nosso desenvolvimento personalizado e modificação conveniente de estilos, usamos estilos HTML e CSS. função de barra .
Através deste artigo, entenderemos como usar HTML/CSS para criar várias barras de progresso básicas e barras de progresso sofisticadas e suas animações.
Crie uma barra de progresso através do medidor de tags HTML. Crie uma barra de progresso através do progresso da tag HTML. Use CSS para criar um donut. barra de progresso em formato Use CSS para criar uma barra de progresso esférica.
A barra de progresso mais comum que encontramos é a barra de progresso horizontal. Este é o mais comum, principalmente utilizando HTML5 para fornecer duas tags nativas e implementar a barra de progresso.
Exemplos específicos de medidor são os seguintes:
<p> <span>Completude:</span> <metro min="0" max="500" valor="350">350 graus</metro> </p>
Entre eles, min, max e value representam o valor máximo, o valor mínimo e o valor atual, respectivamente.
Vamos dar uma olhada no uso de tags:
<p> <label for="file">Completude:</label> <progresso max="100" valor="70"> 70% </progress> </p>
Entre eles, o atributo max descreve a quantidade total de trabalho que precisa ser concluída para a tarefa representada pelo elemento progress, e o atributo value é usado para especificar a quantidade de trabalho que foi concluída pela barra de progresso.
As diferenças entre os dois são as seguintes: Então a questão é, a julgar pela demonstração acima, os efeitos dos dois rótulos são exatamente os mesmos, então qual é a diferença entre eles? Por que existem dois rótulos aparentemente idênticos? A maior diferença entre esses dois elementos é a diferença semântica. O medidor representa um valor de medição escalar ou um valor fracionário dentro de um intervalo conhecido. O progresso representa o progresso da conclusão de uma tarefa. Por exemplo, o nível de conclusão atual de um requisito deve ser usado e se você deseja exibir o valor da velocidade atual em um carro. painel, medidor deve ser usado.
Limitações do medidor e do progresso É claro que, em requisitos reais de negócios ou ambientes de produção, você quase nunca verá os rótulos do medidor e do progresso. Não podemos modificar efetivamente os estilos de medidor e rótulos de progresso, como cor de fundo, cor de primeiro plano de progresso, etc. E o mais fatal é que o desempenho dos estilos padrão do navegador é inconsistente entre os diferentes navegadores. Esta é uma deficiência catastrófica para uma empresa que busca estabilidade e desempenho consistente da UI! Não podemos adicionar alguns efeitos de animação e efeitos interativos a ele, porque em alguns cenários de aplicativos reais, definitivamente não é uma simples exibição de uma barra de progresso e nada mais.
Portanto, nesta fase, mais métodos CSS são utilizados para implementar a barra de progresso.
(1) Uma das maneiras mais comuns de usar porcentagens para implementar uma barra de progresso é usar uma cor de fundo combinada com uma porcentagem para criar uma barra de progresso com gradiente. O exemplo DEMO mais simples é o seguinte:
<div class="g-container"> <div class="g-progress"></div> </div> <div class="g-progress"></div>
Da mesma forma, podemos usar o atributo de estilo HTML para preencher o valor de fundo completo e passar a porcentagem real. Claro, é mais recomendado usar atributos personalizados CSS para passar o valor, a fim de obter o efeito de animação. CSS @property para transformar nosso código:
<div class="g-progress" style="--progress: 70%"></div>
@propriedade --progresso {
sintaxe: '<porcentagem>';
herda: falso;
valor inicial: 0%;
}
.g-progresso {
margem: automático;
largura: 240px;
altura: 25px;
raio da borda: 25px;
plano de fundo: gradiente linear(90deg, #0f0, #0ff var(--progress), transparente 0);
borda: 1px sólido #eee;
transição: .3s --progresso;
}O núcleo é usar um fundo gradiente angular: gradiente cônico (): O efeito de exemplo é o seguinte:
O código é o seguinte:
<div class="círculo de progresso"
v-for="(item,índice) em progressoList" :key="index"
:estilo="{
plano de fundo: `gradiente radial (#fff 55%, transparente 56%), gradiente cônico (#3A7CFF ${item.rate}%, #f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0,4 : 0 }%),gradiente radial(#fff 60%, #F1F3FC 0%);`
}
">
<span class="progress-value" >{{item.name}}</span>
<div class="totalvalbox" >
{{ item.rate }}%
</div>
</div>
<estilo lang="scss" com escopo>
.círculo de progresso {
posição: relativa;
largura: 149rpx;
altura: 149rpx;
família de fontes: PingFang SC;
raio da fronteira: 50%;
exibição: flexível;
alinhar itens: centro;
justificar-conteúdo: centro;
}
.valor de progresso {
posição: absoluta;
alinhamento de texto: centro;
altura da linha: 50rpx;
largura: 100%;
peso da fonte: 400;
tamanho da fonte: 26rpx;
}
.totalvalbox {
largura mínima: 217rpx;
alinhamento de texto: centro;
posição: absoluta;
inferior: -50rpx;
peso da fonte: 400;
tamanho da fonte: 30rpx;
}
</estilo>O problema de otimização é o seguinte:
Os problemas que tendem a surgir aqui são os seguintes: As limitações da realização de barras de progresso de arco com gradientes angulares É claro que este método tem duas desvantagens. Obviamente, quando a porcentagem de progresso não for números como 0°, 90°, 180°, 270°, 360°, ao usar gradientes angulares, haverá bordas irregulares óbvias nas conexões entre cores diferentes. Veja um exemplo de gradiente cônico (#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D):
A solução para tais problemas é deixar algum espaço gradiente no ponto de conexão. Vamos simplesmente transformar o código do gradiente angular acima:
{
- plano de fundo: gradiente cônico (#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
+ plano de fundo: gradiente cônico (#FFCDB2 0, #FFCDB2 27%, #B5838D 27,2%, #B5838D)`
}Observe atentamente o código acima. A mudança de 27% para 27% foi alterada de 27% para 27,2%. Os 0,2% extras são para eliminar o alias.
Em alguns casos, encontraremos uma barra de progresso com cantos arredondados no final da barra de progresso. Claro, esta situação também pode ser resolvida se a cor da barra de progresso for sólida. pequenos círculos no início e no final. Se a barra de progresso for uma cor gradiente, esta barra de progresso precisa ser implementada com a ajuda de SVG/Canvas
Os exemplos são os seguintes:
HTML
<div class="g-progress"></div> <div class="g-container"> <div class="g-progress"></div> <div class="g-circle"></div> </div>
css
corpo, html {
largura: 100%;
altura: 100%;
exibição: flexível;
}
.g-contêiner {
posição: relativa;
margem: automático;
largura: 200px;
altura: 200px;
}
.g-progresso {
posição: relativa;
margem: automático;
largura: 200px;
altura: 200px;
raio da fronteira: 50%;
fundo: gradiente cônico (#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
máscara: gradiente radial (transparente, transparente 80px, #000 80,5px, #000 0);
}
.g-círculo {
posição: absoluta;
superior: 0;
esquerda: 0;
&::antes,
&::depois {
contente: "";
posição: absoluta;
superior: 90px;
esquerda: 90px;
largura: 20px;
altura: 20px;
raio da fronteira: 50%;
histórico: #FFCDB2;
índice z: 1;
}
&::antes {
transformar: traduzir(0, -90px);
}
&::depois {
transformar: girar (90 graus) traduzir (0, -90px);
}
}Com base nesta expansão, você também pode implementar uma barra de progresso multicolorida em forma de arco: (Isso pode não parecer uma barra de progresso, mas mais semelhante a um gráfico de pizza )
.g-progresso {
largura: 160px;
altura: 160px;
raio da fronteira: 50%;
máscara: gradiente radial (transparente, transparente 50%, #000 51%, #000 0);
fundo:
gradiente cônico (
#FFCDB2 0, #FFCDB2 25%,
#B5838D 25%, #B5838D 50%,
#673ab7 50%, #673ab7 90%,
#ff5722 90,2%, #ff5722 100%
);
}Barras de progresso esféricas também são relativamente comuns, semelhantes às seguintes:
O código principal é o seguinte: Basta controlar a altura da onda quando o contêiner esférico indicar progresso de 0% a 100%. Podemos obter o efeito de animação de 0% - 100%
<div class="contêiner">
<div class="wave-change"></div>
<div class="onda"></div>
</div>
.contêiner {
largura: 200px;
altura: 200px;
borda: 5px RGB sólido (118, 218, 255);
raio da fronteira: 50%;
estouro: oculto;
}
.mudança de onda {
posição: absoluta;
largura: 200px;
altura: 200px;
esquerda: 0;
superior: 0;
animação: mudança linear infinita de 12s;
&::antes,
&::depois{
contente: "";
posição: absoluta;
largura: 400px;
altura: 400px;
topo: 0;
esquerda: 50%;
cor de fundo: rgba (255, 255, 255, 0,6);
raio da fronteira: 45% 47% 43% 46%;
transformar: traduzir(-50%, -70%) girar(0);
animação: gire 7s linearmente infinito;
índice z: 1;
}
&::depois {
raio da fronteira: 47% 42% 46% 44%;
cor de fundo: rgba (255, 255, 255, 0,8);
transformar: traduzir(-50%, -70%) girar(0);
animação: gire 9s linear -4s infinito;
índice z: 2;
}
}
.aceno {
posição: relativa;
largura: 200px;
altura: 200px;
cor de fundo: rgb(118, 218, 255);
raio da fronteira: 50%;
}
p {
posição: absoluta;
topo: 50%;
esquerda: 50%;
transformar: traduzir(-50%, -50%);
tamanho da fonte: 36px;
cor: #000;
índice z: 10;
}
@keyframes girar {
para {
transformar: traduzir (-50%, -70%) girar (360 graus);
}
}
alteração de @quadros-chave {
de {
superior: 80px;
}
para {
superior: -120px;
}
}É claro que o CSS está em constante mudança e os tipos de barras de progresso definitivamente não estão limitados às categorias acima. Por exemplo, podemos usar filtros para imitar a animação de carregamento dos celulares Huawei, que também é uma forma de apresentar uma barra de progresso e também pode ser implementada usando CSS puro:
O código principal é o seguinte
<div class="g-container">
<div class="g-number">98,7%</div>
<div class="g-contraste">
<div class="g-circle"></div>
<ul class="g-bolhas">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
HTML,
corpo {
largura: 100%;
altura: 100%;
exibição: flexível;
plano de fundo: #000;
estouro: oculto;
}
.g-número {
posição: absoluta;
largura: 300px;
topo: 27%;
alinhamento de texto: centro;
tamanho da fonte: 32px;
índice z: 10;
cor: #fff;
}
.g-contêiner {
posição: relativa;
largura: 300px;
altura: 400px;
margem: automático;
}
.g-contraste {
filtro: contraste (10) rotação de matiz (0);
largura: 300px;
altura: 400px;
cor de fundo: #000;
estouro: oculto;
animação: hueRotate 10s linear infinito;
}
.g-círculo {
posição: relativa;
largura: 300px;
altura: 300px;
dimensionamento de caixa: caixa de borda;
filtro: desfoque (8px);
&::depois {
contente: "";
posição: absoluta;
topo: 40%;
esquerda: 50%;
transformar: traduzir(-50%, -50%) girar(0);
largura: 200px;
altura: 200px;
cor de fundo: #00ff6f;
raio da fronteira: 42% 38% 62% 49%/45%;
animação: gire 10s linear infinito;
}
&::antes {
contente: "";
posição: absoluta;
largura: 176px;
altura: 176px;
topo: 40%;
esquerda: 50%;
transformar: traduzir(-50%, -50%);
raio da fronteira: 50%;
cor de fundo: #000;
índice z: 10;
}
}
.g-bolhas {
posição: absoluta;
esquerda: 50%;
inferior: 0;
largura: 100px;
altura: 40px;
transformar: traduzir(-50%, 0);
raio da borda: 100px 100px 0 0;
cor de fundo: #00ff6f;
filtro: desfoque (5px);
}
eu {
posição: absoluta;
raio da fronteira: 50%;
plano de fundo: #00ff6f;
}
@for $i de 0 a 15 {
li:nth-filho(#{$i}) {
$largura: 15 + aleatório(15) + px;
esquerda: 15 + aleatório(70) + px;
superior: 50%;
transformar: traduzir(-50%, -50%);
largura: $largura;
altura: $largura;
animação: moveToTop #{random(6) + 3}s facilidade de entrada -#{random(5000)/1000}s infinito;
}
}
@keyframes girar {
50% {
raio da fronteira: 45% / 42% 38% 58% 49%;
}
100% {
transformar: traduzir (-50%, -50%) girar (720 graus);
}
}
@keyframes moveToTop {
90% {
opacidade: 1;
}
100% {
opacidade: 0,1;
transformar: traduzir(-50%, -180px);
}
}
@keyframes hueRotate {
100% {
filtro: contraste (15) rotação de matiz (360 graus);
}
}Por fim, recomendo várias barras de progresso boas, de alta qualidade e interessantes.
A implementação completa dos efeitos acima pode ser clicada - use CSS de maneira inteligente para obter animações de carregamento interessantes
Isso conclui este artigo sobre como implementar várias funções da barra de progresso por meio de HTML/CSS. Para obter mais conteúdo relacionado à barra de progresso html css, pesquise os artigos anteriores de downcodes.com ou continue navegando nos artigos relacionados abaixo. Espero que você apoie downcodes.com no futuro!