Cómo agregar efectos de espera dinámicos a páginas html

1. Pegue imágenes directamente:

Pegue una imagen gif con efecto de espera dinámica en la interfaz

Cómo obtener imágenes gif: busque materiales en línea, si lo sabe. Cómo usar Photoshop, puedes hacerlo tú mismo Producción

lt;img src="wait.gif" /gt;

2. Efecto de espera de dibujo manual de CSS3/SVG/HTML5 Canvas:

Este tipo de efecto: hay muchos materiales similares en Internet, puede elegir según sus necesidades o dibujarlos utilizando las técnicas anteriores

A continuación se proporciona un ejemplo de dibujo CSS3.

lt; stylegt;

.cargando {

ancho: 0;

alto:

borde derecho: 20 px sólido #fff;

borde- superior: 20 px sólido #000;

borde-izquierdo: 20 px sólido #fff; abajo: 20px sólido #000;

radio-borde: 20px;

-moz-border-radius:

-webkit-border-radius: 20px;

}

. cargando {

animación: bganim 0.6s lineal 0s infinito;

-moz-animación: bganim 0.6 s lineal 0s infinito;

-webkit-animation: bganim 0.6s lineal 0s infinito;

}

@keyframes bganim {

de { transformar: rotar(0deg); } a { transformar: rotar(360deg) }

}

@-moz-keyframes bganim {

desde { -moz-transform：rotate(0deg); } a { -moz-transform :rotate(360deg }

}

@-webkit-keyframes bganim {

de { -webkit-transform:rotate(0deg); } a { -webkit-transform：rotate(360deg);

}

lt;/stylegt;

lt;labelgt;Efecto CSS3lt;/labelgt;

lt;div class="loading"gt;lt;/divgt;

---- ----------------- ----------------------------

El efecto se muestra a continuación:

El mecanismo operativo es muy simple: primero dibuje una imagen estática manualmente y luego controle el div correspondiente para girar 360 grados para lograrlo.

3. Utilice el complemento de efecto de espera js (como: spin.js)

JS

---------------- ----------------------- ----------