barra de progresso Bootstrap
Este capítulo irá explicar barra de progresso Bootstrap. Neste tutorial, você verá como criar barra de progresso de carregamento Bootstrap, redirecionar ou estado de funcionamento.
Inicializar barra de progresso usando transições CSS3 e animações para obter o efeito. que versões mais antigas do Internet Explorer e Firefox 9 e versões anteriores não suportam esta funcionalidade, o Opera 12 não suporta animações.
A barra de progresso padrão
Criar uma barra de progresso básico, siga estes passos:
- Adicionar um .progressclasse com o <div>.
- Então, no exemplo acima <div> dentro, adicionar umaclasse .progress-bar com uma vazia <div>.
- Adicionar um atributo de estilo com uma largura, expressa em percentagem, como style = "60%"; 60% representa a localização da barra de progresso.
Vamos olhar para os exemplos a seguir:
Exemplos
<Div class = "progresso">
<Div class = "barra de progresso" role = "progresso" aria-valuenow = "60"
aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%; ">
<span class = "sr-only"> 40% concluída </ span>
</ Div>
</ Div>
tente »
Os resultados são os seguintes:
barra de progresso alternativo
Para criar uma barra de progresso estilo diferente da seguinte forma:
- Adicionar um .progressclasse com o <div>.
- Então, no exemplo acima <div> dentro, adicionar umaclasse .progress-bar e *classe vaziaprogresso-barcom uma <div>. Onde * pode sersucesso, info, aviso, perigo.
- Adicionar um atributo de estilo com uma largura, expressa em percentagem, como style = "60%"; 60% representa a localização da barra de progresso.
Vamos olhar para os exemplos a seguir:
Exemplos
<Div class = "progresso">
<Div class = "progresso-bar progress- bar-sucesso" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 90%; ">
<span class = "sr-only"> 90% completo (com sucesso) </ span>
</ Div>
</ Div>
<Div class = "progresso">
<Div class = "progresso-bar progress- bar-info" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 30%; ">
<span class = "sr-only"> 30% completo (Informação) </ span>
</ Div>
</ Div>
<Div class = "progresso">
<Div class = "progresso-bar progress- bar-aviso" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 20%; ">
<span class = "sr-only"> 20% completo (aviso) </ span>
</ Div>
</ Div>
<Div class = "progresso">
<Div class = "progresso-bar progress- bar-perigo" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 10%; ">
<span class = "sr-only"> 10% completo (perigo) </ span>
</ Div>
</ Div>
tente »
Os resultados são os seguintes:
listras barra de progresso
Criar uma faixa barra de progresso, siga estes passos:
- Acrescentando com um .progressclasse e .progress-listradodo <div>.
- Então, no exemplo acima <div> dentro, adicionar umaclasse .progress-bar e *classe vaziaprogresso-barcom uma <div>. Onde * pode sersucesso, info, aviso, perigo.
- Adicionar um atributo de estilo com uma largura, expressa em percentagem, como style = "60%"; 60% representa a localização da barra de progresso.
Vamos olhar para os exemplos a seguir:
Exemplos
<Div class = "progresso listrado progresso-" >
<Div class = "progresso-bar progress- bar-sucesso" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 90%; ">
<span class = "sr-only"> 90% completo (com sucesso) </ span>
</ Div>
</ Div>
<Div class = "progresso listrado progresso-" >
<Div class = "progresso-bar progress- bar-info" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 30%; ">
<span class = "sr-only"> 30% completo (Informação) </ span>
</ Div>
</ Div>
<Div class = "progresso listrado progresso-" >
<Div class = "progresso-bar progress- bar-aviso" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 20%; ">
<span class = "sr-only"> 20% completo (aviso) </ span>
</ Div>
</ Div>
<Div class = "progresso listrado progresso-" >
<Div class = "progresso-bar progress- bar-perigo" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 10%; ">
<span class = "sr-only"> 10% completo (perigo) </ span>
</ Div>
</ Div>
tente »
Os resultados são os seguintes:
barra de progresso de animação
Criar uma barra de progresso animado, siga estes passos:
- Acrescentando com um .progressclasse e .progress-listradodo <div>. Enquanto a adição declasse .active.
- Então, no exemplo acima <div> dentro, adicionar umaclasse .progress-bar com uma vazia <div>.
- Adicionar um atributo de estilo com uma largura, expressa em percentagem, como style = "60%"; 60% representa a localização da barra de progresso.
Isso fará com que as listras têm uma sensação de movimento da direita para a esquerda.
Vamos olhar para os exemplos a seguir:
Exemplos
<Div class = "ativo progresso listrado progresso- ">
<Div class = "progresso-bar progress- bar-sucesso" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 40%; ">
<span class = "sr-only"> 40% concluída </ span>
</ Div>
</ Div>
tente »
Os resultados são os seguintes:
barra de progresso empilhados
Você pode até mesmo empilhar múltiplos barra de progresso. Várias barras de progresso sobre a mesma pilha.progress pode ser realizado, como se mostra nos exemplos seguintes:
Exemplos
<Div class = "progresso">
<Div class = "progresso-bar progress- bar-sucesso" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 40%; ">
<span class = "sr-only"> 40% concluída </ span>
</ Div>
<Div class = "progresso-bar progress- bar-info" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 30%; ">
<span class = "sr-only"> 30% completo (Informação) </ span>
</ Div>
<Div class = "progresso-bar progress- bar-aviso" role = "progresso"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 20%; ">
<span class = "sr-only"> 20% completo (aviso) </ span>
</ Div>
</ Div>
tente »
Os resultados são os seguintes:
