CSS Preloaders #1: Crea un Indicador de Carga Web Animado con CSS - 3 Dots Loading

[@erickbaladi5603]

Que crack, muchas gracias me fue de mucha ayuda, tenía el problema de que al "desaparecer" la animación el evento onmouseover no me funcionaba pero bastó con cambiar el display a none, en vez de bajar la opacidad.

[@jamirmathiushuamanitolenti1037]

Muchas gracias! es muy importante y valoro mucho ello que lo hagas desde cero, no como otros canales que solo te dan para copiar el código y listo! valoro mucho tu esfuerzo, muchas gracias nuevamente me sirvió de mucha ayuda para mi proyecto de página web, saludos :)

[@lucianonahuelvegadiaz7737]

yo queria el codigo :C

[@14rotin]

Sos un crack, busque miles de tutoriales y solo pude con el tuyo!!!

[@rookieinfinityforce4200]

Muy bueno tu video, muchas gracias!

[@ayelen1774]

Gracias, me sirvio! Me gustó mucho el theme de visual que estas utilizando, se ven bonitas los colores de letras, cual es?

[@LexterDev]

Qué bueno que te haya servido. El theme que uso se llama Monokai. Creo que VS Code lo trae instalado por defecto, es cuestión de activarlo.

[@Mrleopola]

Muchas gracias por el aporte profe. Excelente! Saludos.

[@LexterDev]

Con mucho gusto 😁. Saludos Leopoldo.

[@emmanuelmartinez4191]

Excelente aporte, muchas gracias!

[@LexterDev]

Con gusto. Espero te sirva. Un saludo.

[@DanielAlcoleas]

Gracias!

[@money-dg7zy]

hola buen video, se puede hacer que la barra de desplazamiento lateral tambien aparezca despues de que desaparezca el preloader o no hay forma ya que antes que aparezca el contenido esta ya aparece

[@enzudeveloper3540]

Exelente video Genio. Solo tengo un problema. Creo que este div padre queda siempre por encima de todo lo demas aunque esté con opacity cero. Por lo tanto si tengo links en el body ya no funcionan. ¿Como puedo solucionarlo? GRacias

[@m1nicracko913]

Supiste como arreglar eso?😭

[@gonzac.5788]

@@m1nicracko913 pon esto en el css .contenedor_loader { clip-path: circle(141.2% at 100% 0); transition:clip-path 0.3s ease-in-out; background-color: #f3f3f3; position: fixed; width: 100vw; height: 100vh; z-index: 9999; transition: all 1.5s; display: flex; align-items: center; justify-content: center; } .loader2{ clip-path: circle(0.0% at 100% 0); } y esto en el js window.addEventListener('load',()=>{ const contenedor_loader=document.querySelector('.contenedor_loader') contenedor_loader.style.opacity=0 contenedor_loader.style.visivility='hidden' document.getElementById("loader").classList.toggle("loader2") }) a y agregale un id="loader" al div del html denada compa

[@gutierrezbj]

mi amigo, esta es un tutorial muy bueno :) solo tengo un detalle y es que solo me salen 2 circulos en el loader y no 3, tienes el codigo fuente ? un saludos y gracias

[@rookieinfinityforce4200]

seguramente te falto un punto en el css debido a que los loader tanto before y after llevan un punto al inicio: por ejemplo: .loader, .loader:before, .loader:after{ border-radius: 50%; width: 2.5em; height: 2.5em; animation: loader 1.5s infinite ease-in-out; } Psdt: a mi tambien me paso lo mismo. jejeje

[@lirancoult]

Disculpa cuál es el efecto que ocupas para crear el desvanecimiento del preloader?

[@LexterDev]

¿La transición cuando todo ha cargado, y se oculpa el preloader?

[@hiphopgz]

Como estas por usarimos css y no un gif animado. Que ventajas tiene aparte podemos editar colores y formas en el css. botones con loadear con css procesos de carga grillas sin usar sleep y demas timer

[@LexterDev]

Muy buena pregunta. La razón es por rendimiento y uso de recursos por el navegador web. Un gif es mucho más pesado. Un CSS Loader es mucho más liviano, y tu sitio web cargará rápido de manera más óptima ya que no debe cargar el recurso del gif que al final es una imagen como otras. Agregando que con CSS es más personalizable.

[@hiphopgz]

@@LexterDev genial tus videos.

[@rubencanas3271]

Hola Gracias por tú gran aporte. He logrado hacerlo infinito el proloader pero no me aparece de la misma manera la imagen. Se desplazan verticalmente y nuevamente horizontalmente, arriba queda como las lineas circulares en blanco. Que podría ser que haga mal si tengo el mismo código?

[@LexterDev]

Ya revisaste las clases? Hay que ver si se están aplicando correctamente

[@rubencanas3271]

@@LexterDev Si estuve revisando el código y la verdad es muy raro. Revisaré nuevamente. También me pasa con el otro Loader del video en anillo. Hace todo el proceso pero con las medidas que colocas siguen apareciendo las rayas azules, muy mínimas pero se ven.

[@minorsoft]

Solo me aparecen 2 puntos

[@japanrock100]

como puedo hacer para que esta animacion me salga cuando pinche un boton de consultar y demore la animacion a lo que traiga la base de datos gracias

[@LexterDev]

Para eso sería usar Ajax, y al hacer clic muestras el loader y al momento de capturar la respuesta de la petición, entonces lo ocultas.

[@jesusmoreno7454]

hola a mi se me queda pegado y nunca pasa a la información

[@carlosgustavo7110]

Y el archivo para descargar😢😢

[@emmanuelmartinez4191]

Necesario

[@juangamer6134]

ayuda solo me aparecen dos punto el segundo y el tercero el primero no