Diseñando un Preloader con HTML, CSS y JS

[@ioshuaorsa]

No suelo comentar... Pero ERES un excelente maestro! Explicas de una manera totalmente buena y amigable! Gracias por compartir tu conocimiento.

[@GonzaGoYT]

Muchísimas gracias, me salvaste la vida, la cochinada esa del loader no me sirve, poner una animación como distractor es una muy buena opción (Sin bromear), gracias, mis compañeros me ven como un héroe, Saludos!

[@brauliofv]

Felicidades en este 2016. Eres muy claro en tus explicaciones y practico; me hace pensar que das clases. Al menos como alumno virtual me gusta tu estilo. Sigue y crecerá tu audiencia.

[@davidm.8835]

Este ejercicio está realmente muy bien, pero seguro q a muchos nos gustaría uno en el q realmente tardara el tiempo real de carga, q se vieran los kb. Reales conforme se cargan... si algún día pudiera hacer uno así sería genial. Muchas gracias por sus conocimiento!

[@Jygproyectosweb]

El siguiente será así

[@davidm.8835]

@@Jygproyectosweb No pensaba q lo revisaría tan rápido! Se q siempre está muy ocupado. Me alegra mucho q vuelva a subir vídeos. Muchas gracias por compartir sus conocimientos.

[@nancisdelacaridaddiazvazqu9871]

Saludos y millones de Gracias desde España eres muy didáctico y claro en tus explicaciones me has ayudado un montón

[@joaquinast]

Maestro no dejes de subir videos, excelente canal

[@kan3lomast3r50]

No solo esta excelente el video sino tambien la explicacion es muy clara!!! Gracias por compartir este gran conocimiento. Saludos desde México.

[@abrahamcabarcas3930]

e estado viendo todos tus vídeos es un gran aporte para los que estudiamos esto

[@paulhsc]

Lo mejor de todo "yo no lo uso, pero un cliente lo puede pedir, y lo enseño". Qué bueno, man. A mí tmb m parece innecesario pero está bueno saber cómo se hace

[@Jygproyectosweb]

+PauL SotomayoR Así es, y para esos casos mejor hacerlo con código puro y no con plugins evitando hacer aún más cosas innecesarias.

[@Mr1982Lestat]

Muchas gracias por todos tus vídeos. Llevo tiempo intentando coger vídeos buenos por la web pero na. ¿Y cuál fue mi sorpresa?....encontrar tu canal. Enseñas muy bien, explicas todo con bastante claridad, y sobre todo, haces aprender a las personas. Sigue así amigo. Ya tienes un nuevo suscriptor genio.

[@jaircastillo5465]

realmente eres muy bueno en lo que haces, lamentable que no recibas los likes que mereces! sigue asi, explicas muy bien.

[@shakiragalvanparra3227]

wou me funciona perfecto muchas gracias he aprendido mucho con este canal

[@jusefdany]

Bro es muy buena opción solo que a veces si necesitamos que pre-carge algunas imagenes o videos si queremos optimizar la navegación una vez que se ve todo el contenido. de todas formas muchas gracias!

[@jhiso1660]

Tio eres lo maximo!!!!!!

[@MrAnma65]

¡¡GRACIAS!! Era justo lo que necesitaba. Buena explicación =D

[@framex_media]

Excelente tutorial, muchas gracias!

[@hdmian666]

Muchas, pero muchas felicidades...

[@josuevaldez1559]

ME SUSCRIBO ESTO ES MUY HERMOSO Y ME AYUDO EN UNA PRÁCTICA Q ME DEJARON

[@diegomurillo7877]

EXCELENTE VIDEO, MUCHAS GRACIAS.

[@MarceloMartinsDev]

Muito bom! Parabéns, aula sensacional, estou muito grato! ansioso para novos vídeos.

[@luisangelmedrano954]

Interesante el video me recuerda cuando cargaba las paginas web de flash

[@teveoenlaweb]

saludos, de nuevo gracias por compartir tanto conocimiento !! :)

[@Jygproyectosweb]

+Juan Garcia Muchas gracias

[@tiagonet8794]

muy bien! eres fenomenal

[@tiagonet8794]

muy bien tutorial!!! eres fenomenal!!!!

[@pataslocas4595]

¡Muchas gracias!, saludos.

[@javiervalenciano60]

excelente trabajo muy bien !!

[@seikonabado]

genial... buen hombre... se te entiende muy bien... explicas fenomenal... gracias... ! PD: ya me suscribi... like!

[@Jygproyectosweb]

+Seikon Abado “Ryuk” Muchas gracias

[@benjimtzfl]

genial amigo comparto tu idea deq la pag cargue rapido pero aun asi buen video explikas muy bien

[@nicofuss2422]

Esta excelente el Video!! Muchas Gracias!!

[@jabco1502]

excelentes tutoriales... así es que se explica! gracias! ya me suscribí.. por cierto, para yo hacer que se muestre un vídeo de anuncio antes de que se reproduzca otro vídeo, es decir, mas claro... quisiera un resultado como el que tiene youtube, que cuando yo reproduzco un vídeo, antes de verlo, por obligación, tengo que ver un vídeo de anuncio, antes de ver el que yo quiero... se puede usar esta misma programación??? o si no, por fa harías un tutorial sobre como lograr este resultado. no hay ni uno aquí que explique eso... se lo agradecería.. saludos

[@deronalxdblog]

Excelente !!, solo seria conveniente usar el evento del DOM ( onload ) , para finalizar la animacion

[@Jygproyectosweb]

+RONAL DAVID LUCERO BAZAN Buena observación Ronald, aunque para ello bastaría con quitarle el infinite a la animación y listo.

[@asikkhan611]

very very thanks you I am enjoy you video

[@callofgrutyoficial2974]

Manda todo completo porfavor!!!

[@edem-dc]

Maestro! muy buen tutorial, realmente muy util, la única duda que me queda pendiente es ¿como puedo hacer que el preloader aparezca solo una vez, la primera vez que entro al sitio y no cada ves que vuelvo a la página de inicio? Pd: tus videos me han sido de gran ayuda, porfavor no pares de subir videos! gracias! :D

[@whoisadro]

Pudiste?

[@AlexanderHerreraVargas]

muy buenos tus videos

[@bradigam1]

hola amigo en tu sitio oficial tendras una clase pero que sea en ventana emergente o trasparante. me explico que se visualice parcialmente la pagina detras mientras carga...gracias

[@johnnymerizalde7017]

no hace función de preloader, es una animación que se ejecuta a los 9 segundos...

[@testball244]

@Xavier Valenciano la idea seria hacerlo con js puro

[@josect777]

jajaja cosas raras xD buen video papu

[@fabianmoreno5511]

buen video como siempre. Pero porque no me funciona el codigo java en brackets y en sublime si?

[@Obishman]

muy bueno, gracias, estuve viendo el vídeo y me doy cuenta que en realidad esta animación no refleja el progreso real de la carga del la pagina sino que espera 9 segundos, hay alguna forma de que la animación refleje el progreso real de carga? Gracias.

[@leonnnc]

Saludos de nuevo, Consulta dime como se puede poner lineas transversales dentro del efecto como aparece en windows antes del 100% gracias de antemano su respuesta

[@jorgealbertoortegaceja2872]

Por qué no usas semántica con html? Es una buena practica de SEO, Sabes como hacer un preloader mientras cargo una petición asíncrona mediante ajax?

[@bitcoinmundobitcoindinerop1239]

hola crees que puedas enseñar a usar o crear un sistema de afiliados

[@oscarvidal851]

Hola buenas noches disculpa pero podrías hacer un video en el cual hacer unas gráficas con php y oracle o mysql

[@javiervalenciano60]

se podria mejorar el preloader para que se vea mas tecnologico ?

[@ricardomanriq]

En el JS me salió este problema Missing 'use strict' statement. container.classList.add('cerrar'); Qué error tendré ya que no sube el container ni deja ver la página de bienvenida. Saludos y gracias siempre por compartir y tomarte el tiempo para mostrar tus conocimientos.

[@Jygproyectosweb]

+Ricardo Manriquez G. lo de 'use strict' es para ponerlo en modo estricto (se coloca "use strict"; antes del container.classlist...) pero no es necesario para que funcione, basta con lo que está en el video.

[@MrMoromoro87]

Amigo como se hace un preloader pero que realmente se estén cargando las imágenes y scripts de la pagina??? No simplemente una animación saeteada por un tiempo definido...

[@GonzaGoYT]

Yo justamente buscaba eso, y cuando lo encontré el código no servía, mi pagina ni cargaba, pero al poner un video, sonara tonto pero siento que es mucho mejor...

[@pepejose7595]

¿Cómo se puede implementar algo así en un framework de css? tomando ejemplo bootstrap o materialize.

[@PaulaSegura2015]

PUCHA AHORA VOLEEEEEEEEEEE BUUUUUUUUUUUUUUUUUUUUU

[@jesusnunez4445]

Hola muy buenos sus videos, pero en este tengo una duda como evitar el scroll hacia abajo.

[@Jygproyectosweb]

+Jesus Nuñez Hola Jesús, aplicandole un overflow-y:hidden al body en el css, y luego en el javascript le devolvemos el scroll luego de que termine de cargar. Revisa el codepen: codepen.io/JyGProyectosWeb/pen/gPJpyx

[@jesusnunez4445]

hola muchas gracias amigo y repito muy buenos sus videos

[@reparacionesweb]

hola buenas tardes segui todas sus indicaciones al principio copiando desde el video no me salia vi la web con los codigos copie pegue y salia bien ahora cuando copiaba el js me daba error uso brackets como en el ejemplo cargaba pasaba pasaba y no aparecia la web que podra ser o que instalar o agregar al html saludos gracias

[@jcpuma8339]

Hola amigo, una pregunta se puede crear un diseño en brackets con todos sus atributos en css y luego llevarlo a sublime text y modificarlo?, lo que pasa es que he creado un diseño en brackets lo lleve a otro lugar (PC) y resulta que me olvide llevar el programa y donde estoy no hay internet, pero la PC tiene Sublime Text 03.

[@ReflectionHere]

JULIO PUMA Sí claro que sí puedes

[@klalno9155]

hola podrias hacer un video de como crear un preloader con Pace.js

[@jorgemiranda7713]

Buenas Tardes, como podría hace un preloader con texto ("DISEÑANDO PRELOAD" - como ejemplo)

[@juniorhuertachurano4817]

muy interesante ..!!! pero sabes como se puede aplicar en un formulario Login al ingresar presionar el boton ingresar ... :)

[@Jygproyectosweb]

+junior huerta churano ya tenemos 2 vídeos al respecto

[@ronem9626]

Se puede hacer solo con html y css?

[@polodibujanye]

MUUUY BUEEEENO AMIGO: Como hago para aplicar este preloader al boton submit, pues cuando carga un archivo, no muestra nada. Dame una ayuda please. No se como hacerlo. ¿En el PHP? ¿En HTML? Confusión.

[@Jygproyectosweb]

+Leopoldo Abarca Hola Leopoldo, creo que para lo que deseas hacer este preloader no encaja mucho. Para lo que quieres hacer es otra cosa con php por ejm.

[@polodibujanye]

Gracias amigo. Tengo mi formulario de contacto funcionando. Descargue alguna animación gif que sirve como preloader. ¿Pero como hago que esa animación funcione cuando hago click en ENVIAR? ¿Con target? ¿Boton Click...?. Agradezco tu atención. POLO.

[@Jygproyectosweb]

Puede ser con un modal, usando un target, o con javascript

[@oopian]

Sorry but this isn't actually a Preloader..

[@marcelogn6225]

borra eso plox

[@masterverso817]

Como podria juntarlo con otro estilo .css y otro html??? para tenerlo todo junto en uno

[@eternitylight858]

como seria hacer una barra de vida con ese metodo? es decir que ya este completo al 100% y que vaya bajando de a poco y cada vez que le hago click a un boton se cargue??

[@JaimeMartinez-fs2ji]

amigo si pongo mas contenido en la pagina me sale un scroll para bajar o subir al inciar la animación, si bajo se ve la pagina, la idea que no se vea la pagina antes como resuelvo eso gracias

[@tudisenador]

debes poner el atributo css del preloader "position" con el valor "fixed": "position:fixed;"

[@RodolphoRojasVillanueva]

Estimado, buen dia. Tengo un incoveniente, no se que estoy haciendo mal, pero en el archivo cerrar.js; me arroja dos errores y no realiza el proceso, se genera un bucle cargando, como si no existiera cerrar.js. Adjunto el codigo que he realizado. index.html Document cargando estilo.css body { margin: 0; } .container { position: absolute; top: 0; background: #222; color: #fff; width: 100%; min-height: 100vh; display: flex; } .preloader { margin: auto; width: 400px; height: 30px; background: rgba(255,255,255,0.2); position: relative; } .preloader:before { content: ""; position: absolute; background: pink; width: 0; height: 30px; animation: preloader 10s infinite; } .preloader p { margin: 0; line-height: 30px; font-size: 25px; font-weight: bold; position: absolute; left: 50%; transform: translateX(-50%); } .cerar { transform: translateY(-100%); transition: all 0.5s; } @keyframes preloader { 90% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } } cerrar.js var container = document.getElementById('container'); setTimeout(function() { container.classList.add('cerrar'); }, 9000); Agradezco tu ayuda.

[@lmaestroteran4163]

Saludos mi estimado quizá es diez meses tarde pero el problema fue en el CSS donde tu selector le pusiste "cerar" y pues le falto una "R" tedria que decir ".cerrar" y eso fue todo el problema

[@luisgamez9410]

Como se puede hacer un boton que suba la pagina y muestre un contenido usando scroll y un boton

[@JulioCanteroperfil]

pero eso no es una barra de progreso de nada (no muertra carga o descartga de nada reametne) es solo una animacion que hace que el usuario epsere casi 10 segundos viendo una barra verde que crece de manera comun y corriente sin ningun efecto que valga la pena... si la barra esa mostrara un dato real de carga o descarga de algun archivo por ej. sería util pero poner esto en una web es incluso contraproducente ademas de una perdida de timpo del desarrolladro y el usuario.

[@tobiobitouchiha9391]

Hola necesito ayuda le seguí el pie de la letra todo lo que dice el vídeo pero en la pagina en la que estoy intentando hacer pues el body o el cuerpo es muy grande y la animación de pantalla de carga no cubre todo el body o cuerpo ya le puse el 100% pero sigue fallando.

[@alexanderramos4860]

Amigo y para solo visualizar el logo de la empresa?

[@chikanne18]

Hola, perdón, como haces que en brackets se vean la lineas de indentación, yo eh estado buscando un plugin para eso pero no lo encuentro, agradeceria mucho tu respuesta :)

[@ReflectionHere]

Yare Arista Ident Guides

[@jairosanchez174]

si le quisiera agregar una imagen que vaya avanzando

[@TheNewMusicRecords]

buenos vídeos solo que lo haces muy rápido y el seguirte cuesta ademas que uno no alcanza a ver que tipo de signos utilizas si podrías hacer que se viera mas grande seria mejor porque me quede en la transición de la otra pagina y ne costo un buen solo para que lo tomes en cuenta.. si pudieras pasarme el código de js que escribes te porfavor y si ese archivo lo guarde en una carpeta también debo escribirle una ruta pero en html? gracias espero respuesta

[@bryanmostajo253]

como hago para que al finalizar la animación ya no desaparezca para que se que estático

[@danythe6729]

Cómo le hago ...en Dcoder de Android , lo hago desde la app,de editor de HTML

[@Ing_Maria]

amigo, lo hize implemente mi propio diseño, pero ocurrio que se ve el text de bienvenido :C ayuda plis, ya intente agregar un z-index y nada

Porqué me empieza a cargar desde la mitad?

[@nicofuss2422]

Hola como puedo quitar el "scroll" mientras esta el preloader y devolverlo cuando ya termino y aparece la pagina? Porque sino el Preloader solo cubre una parte de la pantalla y pueden hacer scroll (cuando tiene mas contenido la pagina)... gracias y saludos :D

[@jesusnunez4445]

+Nico Fussoni Hola, ¿Ya encontraste la solución? yo igual tengo ese problema y no se como bloquear el scroll

[@Jygproyectosweb]

+Nico Fussoni aplicandole un overflow-y:hidden al body en el css, y luego en el javascript le devolvemos el scroll luego de que termine de cargar. Revisa el blog: jygproyectosweb.com/articulos/Preloader-con-HTML-CSS-y-JS- ahi esta el codepen he agregado ese pequeño detalle

[@rodrigorg2274]

una pregunta xq siempre pones en html esto:

[@ReflectionHere]

rodrigo RG Para que sea responsive

[@Kainero]

eso es para dispositivos móviles, con eso el usuario no podrá agrandar la pagina web a su gusto y esto se aplica mas que nada si vas hacer un diseño responsivo si no lo haces entonces no es necesario que pongas esa etiqueta meta.. ademas de que poniendo (user-scalable=no) no tendrá permitido que escale la web a un tamaño mas grande y aunque lo tuviera los valores de escala están todas en 1 por lo que el usuario esta limitado a no poder escalar mas que ese valor. saludos

[@raulortegagonzales]

like me suscribo, pero el codigo link caido

[@marcorodriguez5094]

pos si alguien lo necesita cargando cargando bienvenidos a mi pagina

[@marcorodriguez5094]

body{ margin:0; } .container{ position: absolute; top:0; background: #222; color:#fff; width: 100%; min-height: 100vh; display: flex; } .preloader{ margin:auto; width: 350px; height: 30px; background: rgba(255,255,255,0.1); position: relative; } .preloader:before{ content: ""; position: absolute; background: green; width: 0; height: 30px; animation: preloader 10s infinite; } .preloader p { margin:0; line-height: 30px; font-size: 25px; font-weight: bold; position: absolute; left: 50%; transform:translateX(-50%); } .cerrar { transform: translateY(-100%); transition: all 0.5s; } @keyframes preloader{ 90%{ width: 100%; opacity: 1; } 100%{ width: 100%; opacity: 0; } }

[@marcorodriguez5094]

var container = document.getElementById('container'); setTimeout(function(){ container.classList.add('cerrar'); },9000);

[@Thenobby33]

yo voy a usar el codigo porque mi pagina es muy grande y se demora

[@jaedo1991]

tengo problemas con js no se ejecuta y el código es el mismo

[@ericksandoval459]

Oye amigo, porque a mi no me cierra a momento de llenarse la barra, ya introducí todo los códigos correspondientes seguí todo al pie de la letra pero aun así no se cierra y solo la barra se llena infinitamente

[@Jygproyectosweb]

+erick sandoval revisa el código jygproyectosweb.com/articulos/Preloader-con-HTML-CSS-y-JS-

[@teobaldoalexanderpulacheba9396]

amigo no se me ocultan dos cosas un banner y un div

[@Kainero]

tal ves tu banner y tu div tengan un z-index con un numero grande, intenta ponerle a la etiqueta .container un z-index con un numero mayor al que tienes en tu banner y div

[@gustavoperezvicencio1828]

a mi no se muestra la página, se queda en la barra de cargando y no pasa de ahi

[@Jygproyectosweb]

+Gustavo Perez Vicencio revisa el codepen algo estás haciendo mal codepen.io/JyGProyectosWeb/pen/gPJpyx

[@gustavoperezvicencio1828]

+J&G Proyectos Web gracias por responder, pero ha solucione el error, buen vídeo sigue así

[@Bioshock_84]

Primer video que no me gusta del todo del canal. Se limita al tiempo, no es mas practico usar onload (sigo sin saber mucho de js pero supongo que va por ahí) Sentí el video como cuando muestran js puro... la mayoría mandamos variables y llamamos resultados desde php Pero eso nunca lo explican 😥

[@elg8563]

Chales yo copio y pego y nada :(

[@magicmood6830]

No me funciono :/, alguien tiene el codigo?

[@RxdriFTP]

me salen errores en el js siempre me salen es como que el js tiene algo mal cualquier codigo que le ponga aunque esta bien me saltan errores y no se va el cartel de cargando :(

[@Jygproyectosweb]

Si usas el lintern de brackets no le hagas caso. No son errores son advertencias que no son necesarias. Igual funciona. Y si no funciona es porque algo por ahí está mal en el JS o en el HTML

[@RxdriFTP]

@@Jygproyectosweb luego intente copiando el codigo exacto desde tu web y me pasaba lo mismo carga en verde y luego queda ahi

[@ignacioprimo4072]

vengo del futuro y vengo a decirte que tienes cerca de 100 mil supcritores en 2021 jajaj naa solo bromeo jajaja hoy mande cv a una empresa de peru pero soy argentino y me clavo el visto la persona y no fue capas de responder. bueno ¿asi son ? si son asi esa empresa mejor que no me den bola jaja bueno encontre otra empresa en peru que me dio bronca Ó yo estoy equivocado. buscaban un desarrollador web practicante pero con min un año de experiencia en php . a ver corrijanme ademas de mis errores de ortografia pero cuando sos practicante es por que no tienes ni la minima experiencia 0% tienes. hablo sobre web desarrollador. me molesta esas cosas exajeradas que ponen para un puesto. ay uno en españa que tenia todos los lenguajes pero todos tenia como 30 renglones.y te ponen 6 meses de prueba y ser senior va lo ultimo de senior creo que lo invente ja pero lo otro es real pero argentina es super explotador hay de todo y esos puestos es un poroto con los de argentina aca te pide hasta que sepas servir un cafe y buscar tu propios clientes para la empresa hasta eso vi te lo juro lo de el cliente es cierto. lo de el cafe fue una exprecion. saludos a peru y a españa y mexico colombia bolivia chile uruguay paraguay brasil venezuela ecuador.etc saludos a todos los desarrolladores web y diseñador web

[@todoanimeyjuegos3otakuygam758]

me puedes decir el nombre del programas que usas para los codigos ??