Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { margin-top: 100px; background-color: #0042A4; color: #fff; text-align: center; } h1 { font: 1.5em 'Roboto', sans-serif; margin-bottom: 30px; } .spin { display: inline-block; width: 50px; height: 50px; border: 3px solid rgba(255, 255, 255, .3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; } @keyframes spin { to { -webkit-transform: rotate(360deg); } } @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } } </style> </head> <body> <h1>Loading Spinner</h1> <div class="spin"></div> </body> </html>