Let's create this LOADING animation in less than 15 minutes🌈
THREAD🧵
THREAD🧵
The HTML structure is pretty straight forward
- Create a container div
- Create 7 different span elements for each letter in the word "LOADING"
- Create a container div
- Create 7 different span elements for each letter in the word "LOADING"
- Centralize everything, I have used positioning in order to center my elements but you can use any method you want
- Increase the font size and letter spacing
- Apply some text-shadow in order to give it a attractive look
- Don't forget to add display inline-block in span because you can't transform a element with inline display
- Apply some text-shadow in order to give it a attractive look
- Don't forget to add display inline-block in span because you can't transform a element with inline display
- Now we need flip animation in our span element
span {
animation: flip 4s infinite linear;
}
- Create a keyframe rule for flip animation
span {
animation: flip 4s infinite linear;
}
- Create a keyframe rule for flip animation
- Now add animation delay in all letters so that they all flip one after other
- Add animation delay such that total delay time sums up the animation time (i.e. 4 sec) also set equal intervals of delay
- Add animation delay such that total delay time sums up the animation time (i.e. 4 sec) also set equal intervals of delay
That should be it I guess😍
Share your creations below. And feel to share any kind of feedback❤️
Share your creations below. And feel to share any kind of feedback❤️
• • •
Missing some Tweet in this thread? You can try to
force a refresh
