Nas páginas da web, os efeitos da barra de progresso são frequentemente vistos, como bisseting do sistema, status de carregamento, etc. O componente da barra de progresso usa os atributos de transição e animação do CSS3 para concluir alguns efeitos especiais. Esses efeitos especiais não são suportados no IE9 e abaixo das versões do IE9 e do Firefox, e a Opera 12 não suporta atributos de animação.
A barra de progresso é como outros componentes independentes, os desenvolvedores podem escolher a versão correspondente de acordo com suas necessidades:
Menos: Progress-Bars.less
SASS: _Progress-bars.scss
Barra de progresso básico
Princípio de implementação:
Dois recipientes são necessários. O contêiner externo usa o nome da classe.progress e o subcontainer usa o nome da classe.progress-bar; onde .Progress é usado para definir a cor de fundo do recipiente da barra de progresso, a altura, o espaçamento, etc.; e .Progress-bar define a direção do progresso, a cor do fundo e o efeito excessivo da barra de progresso; A seguir, o código -fonte do CSS:
Progresso {Hight: 20px; Margin-Bottom: 20px; Overflow: Hidden; Background-Color: #f5f5f5; Radio de borda: 4px; -webkit-box-shadow: insert 0 1px 2px RGBA (0, 0, 0 .1); Shadow. {float: esquerda; largura: 0; altura: 100%; tamanho da fonte: 12px; altura da linha: 20px; cor: #ffff; text-align: Center; cor de fundo: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba (0, 0, 0, .15); .15);-transição webkit: largura .6s facilidade; transição: largura .6s facilidade;}exemplo:
<div> <div role = "ProgressBar" Aria-valuenow = "30" Aria-valuemin = "0" ARIA-valuemax = "100"> <pan> 30%</span> </div> </div>
Função do atributo de função: diz aos mecanismos de pesquisa que a função dessa div é a barra de progresso;
ARIA-VALUENOW = "30" Função de atributo: o progresso atual da barra de progresso é de 40%;
ARIA-Valuemin = ”0” Função de atributo: o valor mínimo da barra de progresso é 0%;
ARIA-VALUEMAX = "100" Função de atributo: o valor máximo da barra de progresso é 100%;
Você pode remover a tag <man> com a classe .sr somente o conjunto do componente da barra de progresso para permitir que o progresso atual seja exibido;
<div> <div role = "ProgressBar" Aria-valuenow = "40" Aria-valuemin = "0" ARIA-valuemax = "100"> 40%</div> </div>
Barra de progresso colorida
A barra de progresso colorida é a mesma que a barra de progresso de aviso. Para oferecer aos usuários uma melhor experiência, diferentes cores da barra de progresso também são configuradas de acordo com diferentes estados, incluindo principalmente os quatro tipos a seguir:
Progress-Bar-Info: representa a barra de progresso da informação, azul
Progresso-bar-sucesso: indica a barra de progresso do sucesso, verde
Progresso-bar-barão: indica a barra de progresso de aviso, amarelo
Danger de barra de progresso: indica a barra de progresso de erro, vermelho
Código -fonte CSS:
.Progress-Bar-sucess {Background-Color: #5CB85C;}. Progress-Bar-Info {Background-Color: #5BC0DE;}. Progress-bar-warning {Background-Color: #f0ad4e;}. Progress-Bar-Danger {Background-Color: #D9534f;Como usar:
Basta adicionar o nome da classe correspondente à barra de progresso básica
exemplo:
<H1> barra de progresso colorida </h1> <div> <div role = "ProgressBar" Aria-valuenow = "25" Aria-valuemin = "0" ARIA-valuemax = "100"> 25%</div> </div> <div> <div role = "ProgressBar" Aria-valuemax = "40 40 ARIA-valuemax = "0"> 40%</div> </div> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <div role = "Progressabar" ARIA-ARIA-ARIAWENENENENENOWN: ARIA-valuemin = "0"> 60%</div> </div>
Os efeitos são os seguintes:
Barra de progresso listrada
A barra de progresso listrada usa o gradiente linear do CSS3. Não usa nenhuma imagem. O uso da barra de progresso listrada requer apenas a adição do nome da classe "com listras de progresso" ao contêiner da barra de progresso. Progresso. Se você deseja fazer uma faixa de progresso como um progresso de cor e ter um efeito de cor, só precisará adicionar o nome da classe colorida correspondente à barra de progresso.
A seguir, é apresentado o código-fonte de estilo .Progress Striped:
.Progress Striped .Progress-Bar {Background-Image: -Webkit-Gradiente linear (45deg, RGBA (255, 255, 255, .15) 25%, transparente 25%, RGBA (255, 255, 255%, 25%, 25%, 25%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%, 255%. 75%, transparent 75%, transparent );background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparente); tamanho de fundo: 40px 40px;}Cada estado correspondente ao progresso da sequência também tem uma cor diferente
.progress-striped .progress-bar-success {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, Transparente 75%, transparente 75%, transparente); Antecedentes-imagens: gradiente linear (45 graus, RGBA (255, 255, 255, 0,15) 25%, transparente 25%, RGBA 25%, 255, 25%, 25%, 25%, 25%, transparente 50%, 25%, 255%, 255, 25%, 25%, 25%, 25%, 25%, 25%, 255%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%, 25%. .15) 50%, RGBA (255, 255, 255, 0,15) 50%, RGBA (255, 255, 255, 0,15) 75%, transparente 75%, transparente); Antecedentes-imagens: Gradiente linear (45deg, RGBA (255, 255, 25%.5%. .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-striped .progress-bar-warning {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, .15) 75%, transparent 75%, transparente); 75%, transparente 75%, transparente);}. Striped .Prógre-Bar-Danger {Imagem de fundo: -Webkit-linear-gradiente (45deg, RGBA (255, 255, 255,. .15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, .15) 25%, transparente 25%, transparente 50%, RGBA (255, 255, 255, 0,15) 50%, RGBA (255, 255, 255, 0,15) 75%, transparente 75%, transparente);}Vamos dar uma olhada no uso de barras de progresso listradas:
<H1> Barra de progresso listrada </h1> <div> <div role = "ProgressBar" Aria-valuenow = "25" Aria-valuemin = "0" ARIA-valuemax = "100"> 25%</div> </div> <div> <div role = "ProgressBar" Aria-valuemax = "40 40 ARIA-valuemax = "0"> 40%</div> </div> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <div role = "Progressabar" ARIA-ARIA-ARIAWENENENENENOWN: ARIA-valuemin = "0"> 60%</div> </div>
Barra de progresso dinâmica de faixa
A barra de progresso dinâmica da faixa pode ser realizada com base na barra de progresso. Progresso e. Progressio duas classes, adicionando o nome da classe.Active.
O princípio da implementação é realizado principalmente através da animação do CSS3. Primeiro, uma animação de listras de barra progressiva é criada através do @KeyFrames. Essa animação faz principalmente uma coisa, que é alterar a posição da imagem em segundo plano, ou seja, o valor da posição de fundo. Porque a barra de progresso listrada é feita através do gradiente linear do CSS3, e implementos de gradiente linear a imagem de fundo correspondente ao fundo
Aqui está o código -fonte do CSS:
@-Webkit-keyframes Progress-Bar-Stripes {de {Bordado-Posição: 40px 0;} a {posição de fundo: 0 0;}}@keyframes Progress-Bar-Stripes {de {posição de fundo: 40px 0;} para {posição de fundo: 0;}}@KeyFrames apenas cria um efeito de animação. Se queremos que a barra de progresso realmente se mova, precisamos chamar a animação de "palestras-barras" criada por @KeyFrames de uma certa maneira e acionar a animação para entrar em vigor por meio de um evento. Na estrutura do bootstrap, adicione um nome de classe "ativo" ao contêiner da barra de progresso "Progresso" e deixe o carregamento do documento ser concluído e toque na animação "Progress-Bar-Stripes" para entrar em vigor
O código de estilo correspondente para a animação de chamadas é o seguinte:
.Progress.Active .Progress-Bar {-Webkit-animação: Frias de barras progressas 2s Infinito linear; animação: bripes progressas 2s infinito linear;}exemplo:
<H1> barra de progresso dinâmica de faixa </h1> <div> <div role = "ProgressBar" Aria-valuenow = "25" Aria-valuemin = "0" ARIA-valuemax = "100"> 25%</div> </div> <div> <div Role = "ProgressBar" ARIA-31MAX = 40 40 ARIA-valuemax = "0"> 40%</div> </div> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <div role = "Progressabar" ARIA-ARIA-ARIAWENENENENENOWN: ARIA-valuemin = "0"> 60%</div> </div>
O efeito é o seguinte (uma vez que é uma imagem que vem diretamente do resultado na página da web, ele não pode ver seu efeito dinâmico aqui):
Barra de progresso em cascata:
O progresso do empilhamento pode montar as barras de progresso incompatíveis e organizá -las horizontalmente.
exemplo:
<div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
Além de empilhar barras de progresso de cores, você também pode empilhar barras de progresso listradas ou misturar e empilhar barras de progresso listradas com barras de progresso de cores. Você só precisa adicionar as barras de progresso correspondentes ao contêiner "Progresso". Observe também que a soma das barras de progresso empilhadas não pode ser maior que 100%.
Vamos dar uma olhada em um exemplo:
<div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> <//div> <div> <//div> <div> <div> <div> <div> </> </>
Esta é uma explicação detalhada do conhecimento do componente da barra de progresso do Bootstrap. Espero que seja útil para todos!