Loader 3

HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ooo</title> <style> html, body { height: 100%; } body { position: relative; background-color: #fff; } *, *::before, *::after { box-sizing: border-box; } .logo, .logo::before, .logo::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .logo { width: 120px; height: 48px; margin: auto; border-radius: 5px; box-shadow: inset 0 0 0 2px #3498db; overflow:hidden; text-align: center; -webkit-animation:spin .7s linear infinite; -moz-animation:spin .7s linear infinite; animation:spin .7s linear infinite; -webkit-transform: perspective(100px ) rotateX(180deg); transform: perspective(100px ) rotateX(180deg); background: #dec; } .logo::before, .logo::after { content: 'Loading...'; z-index: -1; box-shadow: inset 0 0 0 2px; } @-moz-keyframes spin { 100% { -moz-transform: rotateX(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } } @keyframes spin { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } } </style> <body> <div class="logo"></div> </body> </html>
CSS
JAVASCRIPT
Expand for more options Login