An Interest In:
Web News this Week
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
- April 9, 2024
- April 8, 2024
Some of Our Sources
- Mashable
- Web Designer Wall
- Pearsonified
- Smashing Apps
- TutsPlus - Design
- Fuel Your Creativity
- Fudge Graphics
- CSS Tricks
- Design Modo
- The Verge
Help Webnuz
Referal links:
May 27, 2021 10:12 pm GMT
Original Link: https://dev.to/mohammedelmredi/awesome-css-loader-in-2-min-2kb6
awesome Css Loader in 2 min!
Hello
If you have been working with CSS before you may have trouble with animation,transitions,etc...
Maybe in this post you will change your mind!
how to create an awesome loader easily
- Create
index.htmlfile
<!DOCTYPE html><html><head><title>Loader!</title></head><body><div class="loader" ><span></span><span></span><span></span><span></span><span></span><span></span></div></body></html>step 2: add CSS to your HTML
<style type="text/css">body {background:#000;}.loader {position:absolute;width:100px;height:100px;transform:translate(-50%, -50%);top:50%;left:50%;border-radius:50%;animation:rotate 1.3s ease infinite;}.loader span {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;animation:rotate 1.7s ease infinite;}.loader span::before {content:"";position:absolute;top:50%;left:100%;transform:translate(-50%, -50%);width:4px;border-radius:50%;height:15px;background:#38f860;}.loader span:nth-child(1) {animation-delay:0.1s;}.loader span:nth-child(2) {animation-delay:0.2s;}.loader span:nth-child(3) {animation-delay:0.3s;}.loader span:nth-child(4) {animation-delay:0.4s;}.loader span:nth-child(5) {animation-delay:0.5s;}@keyframes rotate {0%{transform:translate(-50%, -50%) rotate(0deg);filter:hue-rotate(0deg);}50% {filter:hue-rotate(120deg);}100%{transform:translate(-50%, -50%) rotate(360deg);filter:hue-rotate(0deg);}}</style>And that's it run the HTML file in the browser to see an awesome Loader
Original Link: https://dev.to/mohammedelmredi/awesome-css-loader-in-2-min-2kb6
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To