In this video I go over how to create a 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 keyframes to creates with custom animation.

Codepen: https://codepen.io/angeladelise/pen/LYpvpPG

In this video I show you:

• 0:42 - Starting HTML Code
• 1:19 - Starting CSS Code
• 2:07 - Container CSS Styling
• 2:40 - Circle CSS Styling
• 2:56 - Circle:nth child
• 3:13 - Relative positioning
• 4:20 - Transform Origin Center
• 4:34 - Keyframe Animation
• 5:08 - Rotate Keyframe Animation
• 7:09 - Slide Keyframe Animation
• 9:23 - Color Keyframe Animation
• 10:08 - Overview

#css