Diseñando un Preloader con HTML, CSS y JS
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- ¡Primer video del año! Diseñando y programando un preloader solo con HTML, CSS y Javascript.
Blog con el código en codepen: jygproyectosweb...
Nuestro sitio oficial:
Síguenos en facebook: / jygproyectosweb
Únete a nuestro grupo: / 1639298496227219
Síguenos en Twitter:
/ jygproyectosweb
Apóyanos con un me gusta y compartiendo este video, muchas gracias a todos :)
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!
El siguiente será así
@@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.
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!
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
+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.
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.
No suelo comentar... Pero ERES un excelente maestro! Explicas de una manera totalmente buena y amigable! Gracias por compartir tu conocimiento.
Maestro no dejes de subir videos, excelente canal
e estado viendo todos tus vídeos es un gran aporte para los que estudiamos esto
Saludos y millones de Gracias desde España eres muy didáctico y claro en tus explicaciones me has ayudado un montón
No solo esta excelente el video sino tambien la explicacion es muy clara!!! Gracias por compartir este gran conocimiento. Saludos desde México.
wou me funciona perfecto muchas gracias he aprendido mucho con este canal
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!
realmente eres muy bueno en lo que haces, lamentable que no recibas los likes que mereces! sigue asi, explicas muy bien.
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.
Tio eres lo maximo!!!!!!
Excelente tutorial, muchas gracias!
ME SUSCRIBO ESTO ES MUY HERMOSO Y ME AYUDO EN UNA PRÁCTICA Q ME DEJARON
¡¡GRACIAS!! Era justo lo que necesitaba. Buena explicación =D
Muchas, pero muchas felicidades...
excelente trabajo muy bien !!
genial amigo comparto tu idea deq la pag cargue rapido pero aun asi buen video explikas muy bien
muy bien! eres fenomenal
muy bien tutorial!!! eres fenomenal!!!!
saludos, de nuevo gracias por compartir tanto conocimiento !! :)
+Juan Garcia Muchas gracias
Muito bom! Parabéns, aula sensacional, estou muito grato! ansioso para novos vídeos.
genial... buen hombre... se te entiende muy bien... explicas fenomenal... gracias... !
PD: ya me suscribi... like!
+Seikon Abado “Ryuk” Muchas gracias
Interesante el video me recuerda cuando cargaba las paginas web de flash
EXCELENTE VIDEO, MUCHAS GRACIAS.
¡Muchas gracias!, saludos.
Esta excelente el Video!! Muchas Gracias!!
muy buenos tus videos
no hace función de preloader, es una animación que se ejecuta a los 9 segundos...
@Xavier Valenciano la idea seria hacerlo con js puro
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
Manda todo completo porfavor!!!
jajaja cosas raras xD buen video papu
very very thanks you I am enjoy you video
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...
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...
hola crees que puedas enseñar a usar o crear un sistema de afiliados
Excelente !!, solo seria conveniente usar el evento del DOM ( onload ) , para finalizar la animacion
+RONAL DAVID LUCERO BAZAN Buena observación Ronald, aunque para ello bastaría con quitarle el infinite a la animación y listo.
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
Pudiste?
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
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.
como hago para que al finalizar la animación ya no desaparezca para que se que estático
Cómo le hago ...en Dcoder de Android , lo hago desde la app,de editor de HTML
se podria mejorar el preloader para que se vea mas tecnologico ?
Buenas Tardes, como podría hace un preloader con texto ("DISEÑANDO PRELOAD" - como ejemplo)
Como se puede hacer un boton que suba la pagina y muestre un contenido usando scroll y un boton
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
me puedes decir el nombre del programas que usas para los codigos ??
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.
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
Hola buenas noches disculpa pero podrías hacer un video en el cual hacer unas gráficas con php y oracle o mysql
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??
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?
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.
Como podria juntarlo con otro estilo .css y otro html??? para tenerlo todo junto en uno
Amigo y para solo visualizar el logo de la empresa?
¿Cómo se puede implementar algo así en un framework de css? tomando ejemplo bootstrap o materialize.
buen video como siempre. Pero porque no me funciona el codigo java en brackets y en sublime si?
Porqué me empieza a cargar desde la mitad?
Se puede hacer solo con html y css?
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.
+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.
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
debes poner el atributo css del preloader "position" con el valor "fixed": "position:fixed;"
tengo problemas con js no se ejecuta y el código es el mismo
una pregunta xq siempre pones en html esto:
rodrigo RG Para que sea responsive
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
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
hola podrias hacer un video de como crear un preloader con Pace.js
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.
JULIO PUMA Sí claro que sí puedes
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.
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
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
+erick sandoval revisa el código jygproyectosweb.com/articulos/Preloader-con-HTML-CSS-y-JS-
si le quisiera agregar una imagen que vaya avanzando
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 :)
Yare Arista Ident Guides
muy interesante ..!!!
pero sabes como se puede aplicar en un formulario Login al ingresar presionar el boton ingresar ... :)
+junior huerta churano ya tenemos 2 vídeos al respecto
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
+Nico Fussoni Hola, ¿Ya encontraste la solución? yo igual tengo ese problema y no se como bloquear el scroll
+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
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.
+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.
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.
Puede ser con un modal, usando un target, o con javascript
a mi no se muestra la página, se queda en la barra de cargando y no pasa de ahi
+Gustavo Perez Vicencio revisa el codepen algo estás haciendo mal codepen.io/JyGProyectosWeb/pen/gPJpyx
+J&G Proyectos Web gracias por responder, pero ha solucione el error, buen vídeo sigue así
PUCHA AHORA VOLEEEEEEEEEEE BUUUUUUUUUUUUUUUUUUUUU
amigo no se me ocultan dos cosas un banner y un div
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
Hola muy buenos sus videos, pero en este tengo una duda como evitar el scroll hacia abajo.
+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
hola muchas gracias amigo
y repito muy buenos sus videos
No me funciono :/, alguien tiene el codigo?
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 :(
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
@@Jygproyectosweb luego intente copiando el codigo exacto desde tu web y me pasaba lo mismo carga en verde y luego queda ahi
Sorry but this isn't actually a Preloader..
borra eso plox
yo voy a usar el codigo porque mi pagina es muy grande y se demora
like me suscribo, pero el codigo link caido
Chales yo copio y pego y nada :(
pos si alguien lo necesita
cargando
cargando
bienvenidos a mi pagina
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;
}
}
var container = document.getElementById('container');
setTimeout(function(){
container.classList.add('cerrar');
},9000);
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 😥
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