Cómo crear un Indicador de Carga Web (Page Loader Spinner) con Animaciones CSS3 y JavaScript

En éste nuevo videotutorial, aprenderemos cómo hacer un indicador de carga para una página web (Page Loader) con animaciones CSS3 y JavaScript para ocultarlo. SUSCRÏBETE, para más contenido como éste!!!
-------------------------------------------------------------------------------------------
Sígueme en Facebook:
/ xpstutoriales
E - mail: [e-mail]
Grupo en Facebook: / 401952069860952

[@teffidev]

Excelente, que buen ejercicio, super claro y muy detallado. Muchas gracias por compartir tus conocimientos! Bendiciones.

[@matheomartinez741]

Gracias bro me re sirvio, un consejo en el minuto 2:50 si colocas el border en numeros negativos el resultado es mejor

[@jhancarlosilvaochoa5720]

Justo lo que me faltaba, excelente amigo, muchas gracias.

[@LexterDev]

Qué bueno que te sirva. Un saludo 👋

[@felipeortiz483]

Gracias, me ha servido mucho!

[@nenothespider]

excelente tutorial, muy profesional, sigue asi!

[@LexterDev]

Muchas gracias bro, espero les sirva :) Saludos

[@hectorjaker7074]

si tienes razón funciona padrisimo con tu diseño se ve genial en la web que estoy desarrollando saludos y gracias x responder bro.

[@jorgereyes137]

Excelente vídeo, gracias por compartir.!

[@LexterDev]

De nada bro! Saludos :)

[@GeeKBio]

Muy buen material el que publicas en tu canal, sigue adelante!!!

[@eslackware]

Gracias Muy profecional y excelente te felicito

[@johanestebanlopezjimenez]

Profesional

[@erickmichel5444]

amigo muchas gracias, muy buena tu explicación

[@matiassande9669]

Excelente! me funciono!!! Por favor mas videos!!

[@user-gc8vz4sv1h]

Excelente explicación.

[@Huevillin]

muy buen video

[@miguelangelrodriguezgomez2138]

Gracias, me sirvió de mucha ayuda.

[@moxo392]

me ayudaste mucho amigo, gracias

[@angel-ne6op]

super me funciona de maravilla!

[@dimarfernandez]

Buen Aporte, me ayudo mucho.

[@grupoartemedia5513]

Hola, sabes como crear un cargador mostrando el porcentaje de carga para que funcione con Animate en Canvas, (no en as3), gracias.

[@MrAnma65]

Gracias, tu video me ha ayudado =D

[@masterverso817]

Hola muy buenas tengo una pregunta en vez de poner fotos, como lo puedo hacer para que vaya a otra pagina??? Es decir que cuando le des a una opcion del menu carge y salga el Indicador de carga

[@normanejm]

Gracias!! Me ayudó bastante!

[@LexterDev]

De nada bro. Saludos! :)

[@loyber]

muy bueno! quisiera saber como podria hacer para qeu siempre me aparezca centrado en la pantalla visible ya que si la web es muy larga (mas que la pantalla) la centra y donde coloca el contenedor de carga no queda visible. gracias!

[@alfredocoindreau9876]

Gracias bro, super útil. Sale like

[@JamelSeyek]

Buenísimo! Yo lo había visto en uno de los cursos de Udemy pero había olvidado cómo hacerlo. ¿Creés que la parte de Javascript de pueda o deba poner dentro de la IIFE que escucha "DOMContentLoaded" o bien dentro de la función de jquery que hace lo mismo que la IIFE?

[@AdrianmarinDotEs]

Gran vídeo amigo. Añadiendo a imprescindibles! ;)

[@LexterDev]

Genial bro! Saludos.

[@danielventura6179]

@@LexterDev Cómo puedo añadir un tiempo mínimo para la animación?? Por ejemplo, que la animación dure 3 segundos aunque la página ya haya cargado.

[@LexterDev]

@@danielventura6179 Lo puedes hacer con cambiar el código JavaScript y agregar un setTimeout con un delay de 3000 milisegundos. Así: window.onload = function() { const contenedor = document.getElementById('contenedor_carga') setTimeout(function() { contenedor.style.visibility = 'hidden' contenedor.style.opacity = 0 }, 3000) }

[@danielventura6179]

@@LexterDev Y si añado eso, si después de los 3 segundos aún no ha cargado, la animación sigue?? O con el setTimeout son solo los 3 segundos??

[@LexterDev]

@@danielventura6179 No, con el ejemplo que te di arriba son sólo 3 segundos siempre, sin importar si ha cargado o no, siempre serán 3 segundos.

[@manuelsuarezabascal75]

Muchas gracias, me subscribí amigo!

[@victoralonsogochefigueroa6758]

oye hice el codigo tal cual en el video pero a mi me sale un ovalo del tamaño de toda la pagina ayuda..

[@danielescobar1586]

CRACK, FIERA, MASTODONTE, SEMENTAL Y TODO LO QUE ACABE CON GENIAL XD. Gracias! me sirvió mucho, y una pregunta. Cuando la animación termina, es dependiendo que tan rápido tenga la conexión el usuario? o acaba en cuestión de segundos

[@LexterDev]

La animación durará hasta que todo el marcado HTML, y todos los recursos del sitio web (imágenes, vídeos, links, documentos, etc.) hayan cargado, eso dependerá de la velocidad de conexión de su internet.

[@danielescobar1586]

@@LexterDev Dale, muchas gracias! buen tutorial!

[@jerimelantunez9766]

Hola amigo estoy con un proyecto en JSF y quiero implementarlo al darle a un botón me podrías ayudar gracias

[@titojesus615]

uff, buen video bro!

[@moisescastellalcaraz3170]

Hola, muy buen tutorial ya lo implementé en mi página gracias. Una consulta, la función onload es cuando está cargando la nueva página pero hay un tiempo de espera justo cuando pulsas a un enlace, submit u otros que hace que cargue la nueva página. ¿Hay algún evento para capturar ese tiempo y mostrar también la capa? Gracias de antemano.

[@victorrevelo8222]

evento 'onclick' en javascript

[@martinscuderi8356]

hola, tengo un problema que me gustaría saber si alguien le pasa que cada vez que uso java nada funciona amenos que lo copies del código de alguien más¿ será que uso Dreamweaver? también tengo el visual studi code pero no logro arreglarlo.

[@steveo0156]

Amigo me sirvió tu video y quisiera saber si me puedes ayudar con algo. Hay alguna manera de mostrar Cargando... abajo del circulo?

[@LexterDev]

Claro que sí, en la descripción del vídeo está en link a mi página de Facebook, escríbeme y puedo ayudarte.

[@hestranho]

gracias!

[@guildguaxi]

Que bien, lastima que tengas abandonado el canal porque tienes muy buen contenido, si piensas seguir con el canal me avisas y me suscribo y de paso me gustaria si puedes enseñar hacer un carrusel de imagenes con javascript vanilla!!! Saludos...

[@LexterDev]

Hola bro, claro que pienso mantener el canal, ya tengo varias ideas por hacer. Veré si armo tu idea y la subo. :)

[@guildguaxi]

Ok entonces me suscribo :)

[@laurasofiagonzalez9296]

Hola, me funciona bien al cargar la página inicial, pero quiero utilizarlo al cargar una consulta que se hace cuando se envía la información a través de un botón tipo submit. No sé cómo ubicarlo en el html para que se relacione con el botón, gracias.

[@juancarlossarmiento1117]

Hola Laura, pudiste solucionarlo, tengo ese mismo inconveniente

[@KevinURiel_13]

Amigo Me Puedes Dejar El Proyecto En el Link De la descripcion Porfa Ya Me suscribi Esque No Me sale Ya Ise todo El Procedimiento Que Me explicastes Pero no Sale Porfa

[@jhordanloaisigaflores6237]

a mi me paso borra las primeras lineas y solo escribe los id

[@drakomercury7130]

muchas gracias amigo.

[@LexterDev]

Con mucho gusto bro. Un saludo 👋.

[@zerimexgraphics9735]

Hola, Al poner margin: auto; no se centra, se queda en una esquina, Me ayudas??

[@axtrock]

Muy bueno!

[@hectorjaker7074]

en lugar del border-radius algun icono o imagen png sabes ya lo hice quedo genial y sin querer salio un efecto en esta parte #carga{ opacity border:15px solid #ccc; etc...demas codigo } y sale un efecto medio luminoso rojo genial fue sin querer jugando haber que les parece jiji

[@LexterDev]

Es una opción, pero quedaría más pesado en cuanto a la carga de una imagen. En cambio, con css es más rápido y liviano, y se logra lo mismo. Saludos y sigue experimentando haha

[@zasuketutos3864]

ey colega que tal, muy bueno tu vídeo me sirvió de mucho, te tengo dos preguntas y espero que me las puedas responder. 1 tenes un video mas reciente tratando el tema? Quiero que la transición de la del loader a la pagina sea mas suave y no de golpe, algo asi como un delay pero no se como hacerlo :c

[@axelosvaldo1343]

para eso puedes definir el tiempo de animación con los estilos

[@onefunneldesign8043]

Me gusto el video y me funciono pero el problema es que me deshabilita los botones pierden funcionalidad

[@LexterDev]

¿Te deshabilita los botones? Está raro eso, puede que alguna propiedad CSS no se esté aplicando o el z-index esté mal.

[@diegogarcia3620]

excelente gracias

[@aliriofreytez6994]

Buen tutorial

[@mml3674]

Gracias master!!

[@LexterDev]

De nada bro, un saludo :)

[@hanchoolav]

Hola amigo muy bien video, sin embargo quería preguntarte, si tengo una imagen en gif y quiero convertirla en loading de mi página web, como puedo hacerlo ?

[@LexterDev]

Pues en ese caso sólo debes insertarla en tu HTML como una imagen normal, y ya sólo la colocas con CSS donde tú quieres en tu página.

[@hanchoolav]

@@LexterDev gracias por tu respuesta, pero no se como ni en que parte del html debo insertarla, me podrias ayudar por favor ?

[@hanchoolav]

Ya lo hice a mi manera y me quedo perfecto, ya que jamas me contesto...

[@bryantizol7788]

@@hanchoolav bro como lo hicistes con gif me podrias ayudar :'3

[@hanchoolav]

@@bryantizol7788 que necesitas exactamente ?

[@eldavad1089]

Hola amigo, buen tutorial, y si al final de que se termine de cargar el progressbar lo quisiera enlazar con una pagina que tengo por ahi, que debo hacer? porque ya intente ponerle el

[@gloenlandiah2o]

[@marting169]

excelente...

[@alexanderpozo7798]

Hola lexter, primero muy buen video simple y claro; pero una duda mira, si uno el codigo del menu vertical multi nivel y el código de este indicador, se genera un conflicto, lo que es con el botón de hidden del menú y el indicador de carga no se oculta, como podria solucionarlo espero me puedas ayudar.

[@LexterDev]

Gracias bro, y si quieres mejor envíame un inbox al facebook, el link está en la descripción para poder ayudarte mejor. :)

[@universalmassive3027]

en que parte de mi pagina lo añado?

[@nahuelespinillo604]

Holaa, de donde sale el "@keyframes" ? @keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg);} }

[@LexterDev]

Hola, es una animación de CSS nada más.

[@sammyconfiguraciones]

Quiero saber como se llama el programa donde pones el código

[@LexterDev]

Sublime Text 3 bro.

[@hectorjaker7074]

orale que padre esta chevere tu video es genial algo asi faltaba yo pienso a todos puedo manejar algun icono rediseñado png?? saludos desde ya

[@LexterDev]

Gracias bro, pero no entiendo muy bien tu pregunta, si me la explicas mejor para poder ayudarte sería genial. :)

[@flavioantoniocalderongarci7591]

Alguien sabe como hacerlo en ReactJS?

[@anpipol2772]

GRACIAS!!!!!!!

[@Yamaxd]

Funciono perfecto, el detalle es que ahora no funciona el menú de mi pagina, ¿que puedo hacer?

[@hebertvillafuerte7223]

pues yo creo que la mejor opcion era ponerle de estilos display none . para que lo quite ya que el opacity solo lo hace transparente y esa animacion sigue en nuestra pantalla interponiendo los elementos del sitio. o talvez solo agregarle z-index:-10 para que se valla al fondo y no se interponga !!

[@RubenGonzalez-nk9cn]

como se puede hacer lo mismo pero cuando carga una imagen? es decir poner el spinner pero cuando cargue la imagen aparezca

[@LuisPabloAlonsoGameplays]

usas o css o javascript pero... no te puedo ayudar

[@sabrinalamarche9255]

Graciaaas :3

[@LexterDev]

De nada! :)

[@wilsonsilva3372]

Amigo sabes como hacer eso aplicandolo a wordpress?

[@alexigamesoficial]

messirve :messirve:

[@francoXHardCore]

cuesta poner el codigo en la descripción?

[@Thesebhasthian]

Hola, buen vídeo, pero me surgió una pregunta, Lo que pasa es que tengo una barra de navegación con position fixed al bajar un poco, y cuando recargo la página después de mover un poco el scroll el loader no se ve completo, es decir los fixed no se sobreponen. ¿Hay alguna forma de solucionar esto que no sea tan difícil?

[@LexterDev]

Debes jugar con z-index para poner el div del loader sobre cualquier elemento.

[@arhvldz]

¿Alguien soluciono el problema de que se quede cargando infinitamente? (Al momento de ponerlo en una pagina web ((ya en internet :v)) se queda cargando infinitamente y no muestra el contenido).

[@Puezck]

Yo lo solucioné quitando el espacio en getElementById(' contenedor_carga'); entre la comilla y la "c" quedando getElementById('contenedor_carga'); en el código JS.

[@Tumburulun]

Graciaaaas

[@federicodavidfernandezonti4042]

y como seria si quiero poner el icono (logo de mi empresa) en el centro del preloader?

[@LexterDev]

CSS bro.

[@batman68477]

Si quiero con html diferente

[@EpreeeN]

Que programa usas?

[@LexterDev]

Sublime Text 2 bro

[@erwebo6332]

Como haces para colocar los prefixs asi de rapido???

[@LexterDev]

Con el plugin de Sublime Text llamado Emmet bro.

[@bernardoagustinstefanoni4257]

primera vez que veo *:before y *:after

[@supremogamer015]

Ayuda! me dura demsiado poco la carga.. xD, para hasta un bug, sale un pantallaso blanco, como le puedo añadir tiempo?

[@LexterDev]

Según el vídeo, el tiempo es relativo a la carga de recursos del sitio web. Ya que en teoría es el propósito de un preloader. Ahora, si tú le quieres agregar tiempo arbitrariamente, puedes usar un setTimeOut y pasando el tiempo que tú establezcas, ocultas el preloader.

[@supremogamer015]

@@LexterDev Bro, muchas gracias. Ni en mi vida pense que respondieras, y menos tan rapido +new sub

[@LexterDev]

Con gusto, siempre trato de responder dudas. Un saludo bro.

[@andrespinzonmateus2548]

amigo me aparece me no desaparece ayudaaaaaaa

[@LexterDev]

Ya encontraste el error?

[@yilberarevalo6493]

alguien me puede ayudar se ve el fondo de la img pero se ve opac

[@LexterDev]

Se ve opaco?

[@dupler1000]

No me jala amigo, ya le moví y nada, cuando aplico el: contenedor.style.visibility = "hidden"; contenedor.style.opacity = "0"; no me aparece, ya los puse en comillas simple, doble comillas, sin comillas y nada.

[@LexterDev]

Podría ser que necesites actualizar los archivos, en tu navegador da Shift+f5.

[@Yamaxd]

amigo son comillas simples ( ' ' ) no son dobles ( " " )

[@andrewskarlet2928]

tengo el mismo problema :c, pero el mio esta en comillas simples se queda cargando :c

[@jhonrvlogger]

como hacerlo con tiempo de duracion fadeout?

[@LexterDev]

Puedes usar un setTimeout() por ejemplo, pero eso no sería recomendable, ya que la idea de hacer un loader es para mostrar la carga, y debería ser relativa al tiempo de carga real de los elementos, en cambio si lo haces así, y con tiempo "definido" entonces independientemente de la carga real, siempre cargará al mismo tiempo y se daría una idea equivocada de carga cuando el loader es usado para eso, para mostrar la carga como hago aquí en el vídeo, que el loader desaparece cuando el todos los elementos del DOM, imágenes, CSS o Js han cargado.

[@jhonrvlogger]

pero como seria para ponerle entonces un 3000 de fadeout?

[@LexterDev]

Amm bueno, si lo queres hacer entonces pon esto en lugar del Js que uso en el vídeo setTimeout(function(){ var contenedor = document.getElementById('contenedor_carga'); contenedor.style.visibility = 'hidden'; contenedor.style.opacity = '0'; }, 3000)

[@jhonrvlogger]

venga mano me subscribo a tu canal ya e echo varias formas esto.

[@coratecnologia6351]

donde esta el codigo??

[@LexterDev]

En el vídeo.

[@edinsonyasno9278]

amigo ke es esa ventana negra??? es el bloc de notas o ke? :/

[@LexterDev]

Hahaha no bro, es el editor de código Sublime Text. Saludos

[@Kainero]

hoy en día ya no se usa un block de notas para editor código, se usaba el notepad++ , pero ahora el "sublime text 2" no solo es un tema oscuro para reducir el brillo agradable a la vista si no que permite completar códigos mas rápido e instalar varios plugins que te harán la vida mas fácil al escribir codigo

[@emailpublico1783]

te falto poner el scrpit en una txt para copiarlo mas rapido ...

[@aaronmasmurro5491]

Hola, tengo un problema: El loader funciona pero no desaparece al cargar mi web sigue cargando infinitamente y no abarca la totalidad de la web, la barra de navegación se nota. Que podría ser.

[@aaronmasmurro5491]

Ya lo arregle parcialmente, ahora el problema es que sigue cargando y no aparece la pagina.

[@LexterDev]

Eso se podría deber a algún error en el JavaScript, revisa la consola bro.

[@aaronmasmurro5491]

LexterXPS cuando lo pongo en el documento html funciona pero cuando lo hago en archivo externo js no se puede. No debería pasar eso no?

[@aaronmasmurro5491]

LexterXPS ya lo arregle, lo qué pasó es que yo tenía un main.js y se creo un conflicto cuando lo maneje por un archivo js propio del preloader. Lo que hice es simple, lo puse en el main.js y el otro lo elimine.

[@humbertomoli99]

[@franklinpereira3721]

muy video podria hacer un video integrando a un proyecto de verdad ...

[@secondoldaccoundsecondolda374]

mi pagina carga muy rapido q el loader con suerte lo ves! jajaja

[@gloenlandiah2o]

Seguro tienes pocas líneas de código jajajaja

[@mateogarcia466]

Gracias por tu video. Me fue de mucha utilidad.

[@LexterDev]

Qué bueno que te sirvió. Un saludo 👋