An Interest In:
Web News this Week
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
Some of Our Sources
- Mashable
- Techcrunch
- Just Creative
- You The Designer
- Fuel Your Creativity
- Noupe
- Stylized Web
- Design Modo
- Web Resource Source
- Android Dissected
Help Webnuz
Referal links:
Loading Animation with CSS only
Hello Everyone, Today we are going to create cool loading animation with CSS only. So, let's get started.
Our final result will look like this
In the end of this post I attached Codepen Pen.
Firstly we have to write some HTML
<body> <span>L</span> <span>O</span> <span>A</span> <span>D</span> <span>I</span> <span>N</span> <span>G</span> </body>We just created 7 <span> and now it's time to write CSS part for this loading animation effect.
First set margin and padding to 0
*{ margin:0; padding:0; font-weight:bolder;}Now set body display:flex and justify-content:center and align-items:center to center the LOADING word.
body{ display:flex; justify-content:center; align-items:center; height:100vh; background-color:#333; }Now set font-size to a desired value and set margin to create some gap inbetween .
span{ font-size:30px; margin:5px;}Now target the individual letter with nth-child() pseudo selector to animate them. Set animation-delay of each child to some random value. So, there is a difference in their timing.
span:nth-child(1){ color:red; animation:l 1s linear infinite;}span:nth-child(2){ color:blue; animation:l 1s 0.11s linear infinite;}span:nth-child(3){ color:green; animation:l 1s 0.33s linear infinite;}span:nth-child(4){ color:red; animation:l 1s 0.47s linear infinite;}span:nth-child(5){ color:orange; animation:l 1s 0.24s linear infinite;}span:nth-child(6){ color:cyan; animation:l 1s 0.3s linear infinite;}span:nth-child(7){ color:magenta; animation:l 1s 0.19s linear infinite;}Create a keyframe to animate them.
@keyframes l{ 0%{ transform:translateY(-14px) } 50%{ transform:rotateY(90deg); } 100%{ transform:translateY(-14px); }}If we change transform with respect to Y axis to X-axis the final result will look like this.
Codepen:
I hope you love this post.
Support me if you can.
Original Link: https://dev.to/devrohit0/loading-animation-with-css-only-4i6n
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To