Efecto del espectáculo:
1) Al hacer clic en la carga, la simulación realiza la carga asincrónica. El navegador está bloqueado. Aparece la barra de progreso.
Ideas de implementación:
1. Cuando el usuario hace clic en el botón de carga para ejecutar una solicitud asíncrona. La barra de carga aparece cuando se llama al método.
2. ¿Cómo implementar la barra de progreso?
1) Agregue un nuevo DIV a Docum.Body. Sobrescribe el navegador. Establezca el fondo será atenuado. Z-Index = 999. El usuario no puede modificar el valor de la interfaz al cargar.
2) Agregue un DIV dinámico a Docum.Body.
Implementación del 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 = "loading.css" medie = "charset" onClick = "showloading ()"> Load </boton> </body> </html>
Carging.js:
función showloading () {var overdiv = document.createElement ("div"); var loadingDiv = document.createElement ("div"); var childDiv1 = document.createElement ("div"); var childDiv2 = document.createElement ("div"); var childDiv3 = document.createElement ("div"); overdiv.classlist.add ('over'); loadingdiv.classlist.add ('spinner'); childDiv1.classlist.a DD ('Bounce1') ChildDiv2.ClassList.Add ('Bounce2') ChildDiv3.ClassList.Add ('Bounce3') LoadingDiv.AppendChild (ChildDiv1); lo adingdiv.appendchild (ChildIndiv2); LoadingDiv.AppendChild (ChildDiv3); document.body.appendChild (overdiv); document.body.appendChild (LoadingDiv) setTimeOut (function () {document.body.removechild (overdiv); document.body.removechild (LoadingDiv)}, 5000);}Carging.css
.spinner {ancho: 150px; text-align: Center; izquierda: 50%; arriba: 50%; posición: absoluto; z-index: 1000;}. Over {ancho: 100%; altura: 100%; z-odex: 998; color de fondo: gris; posición: absoluta; tope: 0px; izquierda: 0px; opacity: 0.2;}. sportner> Sportner {Widner {30px; topx; topx: topx; topx: topx; 30px; Color de fondo: #67CF22; Border-Radius: 100%; Display: Inline-Block; -WebKit-Animation: BounCedElay 1.4S Infinite Fase-In; Animation: BounCedElay 1.4s Infinite Fase-In;/ * Pedir primer marco de los flacos cuando la animación comienza */-Webkit-animation-Mode-Mode: Ambas; Ambas; Ambas; Ambas de la animación de la animación. .Bounce1 {-Webkit-Animation-DeLay: -0.32s; Animation-DeLay: -0.32s;}. Spinner .Bounce2 {-Webkit-Animation-DeLay: -0.16s; Animation-Delay: -0.16s;}@-Webkit-Keyframes Bouncedelay {0%, 80%, 100%, 100%, 100%{ -webkit-transform: escala (0.0)} 40% {-webkit-transform: scale (1.0)}}@Keyframes BounCedElay {0%, 80%, 100% {transform: escala (0.0);-webkit-transform: escala (0.0);} 40% {transform: escala (1.0);-webkit-transform: scale (1.0);Resumir:
1. El método se puede plantear. Reencapsular la solicitud AJAX una vez. Implemente el método de la barra automática cuando llame a la solicitud AJAX.
2. Si es angular, Angular proporciona métodos para monitorear las llamadas HTTP. Simplemente llame al método de la barra de progreso al monitorear las solicitudes de ejecución HTTP. No es necesario llamar al método de la barra de progreso cada vez que ejecuta llamadas HTTP y monitorear las solicitudes de ejecución HTTP. No es necesario llamar al método de la barra de progreso cada vez que ejecuta HTTP.
El contenido anterior está relacionado con la barra de progreso de carga asíncrona JS presentada por el editor. ¡Espero que sea útil para todos!