⌚️ Como crear un LOADER con HTML CSS y Javascript

Подписаться 123 тыс.

Просмотров 28 тыс.

50% 1

Aprenderemos como crear un loader o mejor conocido como preloader de carga funcional con html css y javascript, lo crearemos sin ninguna libreria, crearemos este loader con html css y javascript puro.
👇👇👇Ver más👇👇👇
No te olvides de dejar un comentario de que te gustaría ver en cursos previos de mi canal y suscribirte al canal, porque con AlexCG Design, crecemos juntos!
📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta para un 90% de descuento en Hostinger.com.
ENTRA AQUÍ 👉 www.hostinger.com/alexcg
📘CURSO CSS3 COMPLETO 👉 alexcgdesign.com/cursocss
📌 Links interesantes 📌
▶️ ¿Necesitas una página web?: bit.ly/2VaUUGt
▶️ Blog de desarrollo web: bit.ly/2DJM0oF
▶️ ¿Te gustó el vídeo? Suscribete aquí: ru-vid.com...
📌Herramientas usadas📌
▶️ Paginas con loaders: loading.io/css/
▶️ Clip-path generator: bennettfeely.com/clippy/
✉️ Redes sociales ✉️
▶️Facebook: goo.gl/7o77tx
▶️Linkedin: goo.gl/byCJnS
▶️Github: github.com/AlexCGDesign
▶️ Página web: bit.ly/2VaUUGt
#LoaderHTML

Наука

Опубликовано:

22 дек 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 35

@AlexCGDesign 4 года назад

♠️ Curso animaciones CSS3, Flexbox y más: www.udemy.com/course/curso-diseno-web-avanzado-html5-css3-js/?referralCode=DF9804A20E156699543C

@francoav4711 4 года назад

Alex muchas gracias por el video me ayudo bastante :3

@felipeagudelo76 Год назад

Excelente muchas gracias!!

@majordocomandonegro 3 года назад

obrigado por compartilhar algo muito util e simples de fazer, sem precisar de plugins ou jquery, gostei muito, valeu !!!!!!!

@zekecabreexe Год назад

buenisimo !!!

@lucasgolchtein9962 4 года назад

Alex, me sirvió tu video pero varias veces durante el mismo, explicas cosas confusas o que pones y luego quitas entonces nos confunde a nosotros a la hora escribir el codigo a la par contigo. Te agradezco por el tutorial, ya que, me sirvió pero si podrias modificar eso a la hora de explicar mejoraría todo. Gracias

@AlexCGDesign 4 года назад

Gracias amigo, ya estoy mejorando en todo eso, estos comentarios me sirven mucho, gracias

@fabrizioferroni609 4 года назад

Hola amigo, muy bueno el video, este si me funciono, lo unico es que quiero modificarlo a mi gusto pero no se como, me podrias pasar algun lugar para hablar con vos ? Gracias

@marioborjacampos2271 4 года назад

Hola como estas?! Mencionaste un loader 2 en el archivo de estilo, pero no se vio donde lo colocaste en el archivo html. En que parte lo colocaste? Gracias por la ayuda!!!

@conspilt5021 Год назад

Buen tutorial Alex, solo me queda una duda, ¿Cómo se le haría para obtener el porcentaje de carga de la página y mostrarlo en el loader ?

@Comander311 4 года назад

Jamás había sentido tanto suspenso 😄

@AlexCGDesign 4 года назад

Gracias Chuff!!

@elchonadoomguy3171 8 месяцев назад

Buen tutorial, una duda, ¿como lo hago para poner el spinner al apretar un boton que me envie a un metodo de pago? Ayuda pls

@marianobarrionuevo2278 3 года назад

Alex, genial el contenido que hiciste, solo tengo una duda Como puedes restringir el scroll, por que si una persona hacer scroll mientras esta la animacion en frente, cuando se termina la animacion, en vez de ver el inicio de la pagina ve el final por ejemplo. Yo lo solucione con un setTimeout y cambiando mediante setAttribute la propiedad display de none a block, pero no se si sera de la mejor manera para hacer eso saludos y gracias

@JoseIsaac6858 3 года назад

Xd. Se borró el comentario

@danielpintos6486 Год назад

Puedes utilizar la instrucción: this.window.scrollTo(0,0); Así al terminar de cargar el scroll volverá al inicio.

@JesusSanchez-ft3vt 3 года назад

amigo me aparece este error en la consola main.js:2 Uncaught TypeError: Cannot read property 'classList' of null at main.js:2

@JoseIsaac6858 3 года назад

A la hora de seleccionar el elemento, recibió un valor nulo, esto debido a que no copias te bien el ID. En caso de que desees que aparezca la función solo cuando está incluido el elemento, es decir cuando no sea nulo, escribe el siguiente código: window.addeventlistener('load', function (){ let $loader = document.getElementById('loader'); if($loader!=null){ $loader.classList.toggle('lo'); } }

@betho6990 2 года назад

La verdad no sirve si se están usando navbar de Bootrstrap, al clickearlo se queda de adorno como una sección adicional, se podría resolver, pero me interesa algo corto y consiso :b

@jonatanhn00 4 года назад

Alex mencionas en tu vídeo que está parte de los loaders no las trabajamos en tu curso de udemy, y mi pregunta sería, seguirás actualizando tu curso?

@AlexCGDesign 4 года назад

Hola Jonatan, estás en el curso?

@AlexCGDesign 4 года назад

Si, pienso seguir actualizandolo, pienso agregar una parte de CSS GRID

@jonatanhn00 4 года назад

@@AlexCGDesign perdón por no contestar no me apareció ninguna notificación amigo, así es soy uno de tus estudiantes en udemy

@jonatanhn00 4 года назад

Eso de GRID estaria genial gracias alex

@AlexCGDesign 4 года назад

@@jonatanhn00 sí, espero a finales de Enero o mediados, subir el curso!

@armandoarguello2944 2 года назад

Como hacerlo al dal clik a un botón?

@luiscarlossilvaaguas5776 4 года назад

tu lo vas a subir como un video ? para descargarlo

@AlexCGDesign 4 года назад

Se subirá

@BlassHidden 4 года назад

Bro lo hize con otros iconos de carga y no se centran, solo con el que escogiste

@lirancoult 3 года назад

Tienes que editar los @keyframes, nada más, funciona perfecto

@davidzambrano3987 3 года назад

bro es mas o menos asi. .lds-facebook div { display: inline-block; position: relative;

@Chzfabian 11 месяцев назад

mano gracias por tus videos pero de verdad me molesta mucho que estoy aprendiendo y te equivocas osea estas haciendo un paso luego dices. ahi no.. entonces borras y tengo que volver a borrar todo y entender de donde sale todo. todo bien con eso pero trata de corregir eso bro. gracias