Indeterminate Loading Animation | HTML CSS Tutorial

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

Просмотров 1,5 тыс.

50% 1

New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
In this video I go over how to create this indeterminate loading animation using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use CSS Grid for the layout and then add motion effects with a keyframe animation.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: / @angeladesign737
Codepen: codepen.io/angeladelise/pen/j...
In this video I show you:
0:00- Intro
0:34 - Starting Code
1:02 - HTML Code
1:32 - CSS Code
1:56 - Loading Dot CSS Code
3:34 - Keyframe Animation
5:52 - Wave Effect with Animation Delay
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/angeladelise
Blog: / angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

Наука

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

13 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Love this video. It very well explained. Looking forward to more video from Angela

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

Nice! Love it, thank you @Angela Delise for every moment you spare to us. Special thanks for sharing the gears you use to create these awesome videos :) I was away for a while, had to learn the basics of css and java, because some elements and boxes where disappearing from the view, without having any clue for the why..

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

Thank you! 😊

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

Thank you 🎉

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

Happy it helped!

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

Thanks.. Love you 😍😍

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

@Angela Delise may I ask you, what is the appropriate method to dismiss this loading animation when the page loads completely, or how to use this animation within DIVs that require some time to accomplish due to certain methods and calculation, like fetching records from a database. A Multitude of Thanks.

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

You can add a function to the javascript - window.onload and set the loading class to hide when it is complete.

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

@@angeladesign737 Thank you :)

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

The animation is harsh at the beginning because of the delayed starts. A quick fix for that is to give negative values to `animation-delay`s, e.g. `animation-delay: #{$i * -0.3}s;`. This is totally legit as stated in the MDN Web Docs: «A negative value causes the animation to begin immediately, but partway through its cycle.». Nice tutorial by the way!

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

Great tip, thank you!