HTMLify
css4.html
Views: 620 | Author: demo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <title>CSS Loading Spinner Animation</title> <style> /* Custom CSS for the loading spinner animation */ .container { text-align: center; padding: 50px; } .loading-spinner { border: 6px solid rgba(0, 0, 0, 0.1); border-top: 6px solid #0074d9; border-radius: 50%; width: 50px; height: 50px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="container"> <h1>CSS Loading Spinner Animation</h1> <p>See a rotating loading spinner below:</p> <!-- Loading Spinner Element --> <div class="loading-spinner"></div> </div> </body> </html> |