Hourglass Loading Animation using CSS
Dive into the world of web design as we create a Classic Hourglass Loading Animation using CSS. In this step-by-step tutorial, you'll learn CSS Animation tips and how to bring a touch of elegance to your projects. let's craft something visually stunning together 😉
📂 Assets
Nothing's used...
🔗 Source Code
https://github.com/hosseinnabi-ir/Hou...
🔔 Subscribe Now!
/ @codewithhossein
⏱ Timestamps
00:00 Hourglass Preview
00:31 Hourglass Frame Elements
00:39 General Styles
01:12 Hourglass Frame Styles
02:02 Design Hourglass Top
03:12 Design Hourglass Top
04:04 Hourglass Shadows
05:40 Rotation Animation
06:18 Sand Filling Animations
07:57 Design Drips
09:24 Dripping Animations
10:27 Final Test
11:08 Thanks For Watching :)
🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Ikson - Last Summer [Official]
Music provided by Ikson®
Listen: • #37 Last Summer (Official)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Song: Levianth & Axol - Remember (feat. The Tech Thieves)
Music provided by NoCopyrightSounds
Free Download/Stream: http://ncs.io/remember
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
Watch: • Jordan Schor & Harley Bird - Home | Futur...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
Watch: • Lost Sky - Where We Started (feat. Jex) | ...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Thanks for watching, I appreciate it 🙏
Made with 💗 by Hossein