Kumar Lakshmanan
Home
Features
More
Home
HTML CSS JS
CSS Loader Animation
CSS Loader Animation
Kumar Lakshmanan
9:03 AM
HTML CSS JS
CSS Loader Animation Version_5
Image
Real time example
Inspect the HTML
<!DOCTYPE html> <html> <head> <title>Loading Animation</title> </head> <body> <div class="container-load"> <div class="loader"> <div class="loader"> <div class="loader"> <div class="loader"> <div class="loader"> <div class="loader"> <div class="loader"> <div class="loader"> <div class="loader"> <div class="loader"> <div class="loader"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <style> body { background:#FFF; } .container-load { transform: translate(-50%,80%); width:200px; height:200px; border-radius:50%; position:relative ; top:50%; left:50%; animation:colorize 1s ease infinite; overflow:hidden; } @keyframes colorize { 20% { filter:hue-rotate(72deg); } 40% { filter:hue-rotate(144deg); } 60% { filter:hue-rotate(216deg); } 80% { filter:hue-rotate(288deg); } 100% { filter:hue-rotate(360deg); } } .loader { width:calc(100% - 12px); height:calc(100% - 12px); position:absolute; border:5px solid #000; border-top:10px solid #09f; border-radius:50%; animation-fill-mode: forwards; animation:rotate 5s 0.5s linear infinite; } @keyframes rotate { 30% { transform: rotate(270deg); } 40% { transform: rotate(240deg); } 50% { transform: rotate(210deg); } 60% { transform: rotate(180deg); } 70% { transform: rotate(150deg); } }</style> </body> </html>
HTML CSS JS
Pre Loaders
Post a Comment
0 Comments
Labels
Buttons
(6)
Calculator
(3)
Clock
(2)
Entertainment
(2)
Forms
(6)
HTML CSS JS
(26)
Javascript points
(9)
Love
(2)
Menu HamBurger
(2)
Pre Loaders
(4)
Tamil News
(2)
Join Our Whatsapp Group
Join
Search This Blog
Popular Posts
Seven Spinner Animations Using Font-icons
Disco Lights Animation using CSS
Total Pageviews
Contact Form
Name
Email
*
Message
*
0 Comments