Mostrar efeito:
1) Ao clicar em carregar, a simulação executa o carregamento assíncrono. O navegador está bloqueado. A barra de progresso aparece.
Ideias de implementação:
1. Quando o usuário clica no botão Carregar para executar uma solicitação assíncrona. A barra de carga aparece quando o método é chamado.
2. Como implementar a barra de progresso?
1) Adicione um novo div ao documento. Substitua o navegador. Defina o fundo estará acinzentado. Z-Index = 999. O usuário não pode modificar o valor da interface ao carregar.
2) Adicione uma div dinâmica ao documento.body.
Implementação de código:
Main.html:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <script src = "loading.js" charset = "utf-8"> </script> <link rel = "styleSheet" href = "carreging.csSSSE" " OnClick = "ShowLoading ()"> Load </button> </body> </html>
Carreging.js:
function showloading () {var overdiv = document.createElement ("div"); var loadingdiv = document.createElement ("div"); var childDiv1 = document.createElement ("div"); var childDiv2 = document.createElement ("div"); document.createElement ("div"); overdiv.classList.add ('over'); carregingdiv.classList.add ('spinner'); ChildDiv1.classList.a dd ('bounce1') childdiv2.classList.add ('bounce2') childdiv3.classList.add ('bounce3') carregingdiv.appendchild (ChildDiv1); lo adingdiv.appendChild (ChildDiv2); LoadingDiv.AppendChild (ChildDiv3); document.body.appendChild (superdiv); document.body.appendChild (loadingdiv) setTimeout (function () {document.body.removechild (superdiv); document.body.removechild (carregingdiv)}, 5000);}Carregamento.css
.spinner {width: 150px; text-align: centro; esquerda: 50%; topo: 50%; posição: absoluto; z-index: 1000;}. sobre {largura: 100%; altura: 100%; Z-index: 998; Background-Color: Gray; Posição: Absolute; Top: 0px; esquerda: 0px; 30px; cor de fundo: #67CF22; Radio de borda: 100%; Display: Block Inline; -Webkit-Animação: Boundelay 1.4s Infinito Facilidade-In-Out; Animação: Ambasia de Animação; Ambos;}. Spinner .bounce1 {-webkit-animação-dellay: -0.32s; animação-dellay: -0.32s;}. {-webkit-transform: escala (0,0)} 40% {-webkit-transform: scale (1.0)}}@keyframes boundelay {0%, 80%, 100% {transform: escala (0,0);-webkit-trans: scale (0,0);} 40% {transformam.Resumir:
1. O método pode ser aumentado. Reencapsule a solicitação do AJAX uma vez. Implemente o método da barra automática ao chamar uma solicitação de Ajax.
2. Se for angular, o Angular fornece métodos para monitorar chamadas HTTP. Basta chamar o método da barra de progresso ao monitorar solicitações de execução HTTP. Não há necessidade de chamar o método da barra de progresso sempre que você executar chamadas HTTP e monitorar solicitações de execução HTTP. Não há necessidade de chamar o método da barra de progresso sempre que você executar o HTTP.
O conteúdo acima está relacionado à barra de progresso de carga assíncrona JS introduzida pelo editor. Espero que seja útil para todos!