Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- html {
- height: 100%;
- }
- body {
- height: 100%;
- background: #3d3d3d;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .loader {
- position: relative;
- width: 75px;
- height: 100px;
- }
- .ball {
- position: absolute;
- bottom: 10px;
- left: 0;
- width: 10px;
- height: 10px;
- background: #fff;
- border-radius: 50%;
- animation: ball 4s infinite;
- }
- .stair {
- position: absolute;
- bottom: 0;
- width: 10px;
- height: 50%;
- background: #fff;
- transform-origin: center bottom;
- box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
- }
- .stair:nth-child(1) {
- left: 0px;
- transform: scale(1, 0.2);
- animation: bar-up-1 4s infinite;
- }
- .stair:nth-child(2) {
- left: 15px;
- transform: scale(1, 0.4);
- animation: bar-up-2 4s infinite;
- }
- .stair:nth-child(3) {
- left: 30px;
- transform: scale(1, 0.6);
- animation: bar-up-3 4s infinite;
- }
- .stair:nth-child(4) {
- left: 45px;
- transform: scale(1, 0.8);
- animation: bar-up-4 4s infinite;
- }
- .stair:nth-child(5) {
- left: 60px;
- transform: scale(1, 1);
- animation: bar-up-5 4s infinite;
- }
- @keyframes ball {
- 0% { transform: translate(0, 0); }
- 5% { transform: translate(8px, -14px); }
- 10% { transform: translate(15px, -10px); }
- 17% { transform: translate(23px, -24px);}
- 20% { transform: translate(30px, -20px); }
- 27% { transform: translate(38px, -34px); }
- 30% { transform: translate(45px, -30px); }
- 37% { transform: translate(53px, -44px); }
- 40% { transform: translate(60px, -40px); }
- 50% { transform: translate(60px, 0); }
- 57% { transform: translate(53px, -14px); }
- 60% { transform: translate(45px, -10px); }
- 67% { transform: translate(37px, -24px); }
- 70% { transform: translate(30px, -20px); }
- 77% { transform: translate(22px, -34px); }
- 80% { transform: translate(15px, -30px); }
- 87% { transform: translate(7px, -44px); }
- 90% { transform: translate(0, -40px); }
- 100% { transform: translate(0, 0); }
- }
- @keyframes bar-up-1 {
- 0% { transform: scale(1, 0.2); }
- 40% { transform: scale(1, 0.2); }
- 50% { transform: scale(1, 1); }
- 90% { transform: scale(1, 1); }
- 100% { transform: scale(1, 0.2); }
- }
- @keyframes bar-up-2 {
- 0% { transform: scale(1, 0.4); }
- 40% { transform: scale(1, 0.4); }
- 50% { transform: scale(1, 0.8); }
- 90% { transform: scale(1, 0.8); }
- 100% { transform: scale(1, 0.4); }
- }
- @keyframes bar-up-3 {
- 0% { transform: scale(1, 0.6); }
- 100% { transform: scale(1, 0.6); }
- }
- @keyframes bar-up-4 {
- 0% { transform: scale(1, 0.8); }
- 40% { transform: scale(1, 0.8); }
- 50% { transform: scale(1, 0.4); }
- 90% { transform: scale(1, 0.4); }
- 100% { transform: scale(1, 0.8); }
- }
- @keyframes bar-up-5 {
- 0% { transform: scale(1, 1); }
- 40% { transform: scale(1, 1); }
- 50% { transform: scale(1, 0.2); }
- 90% { transform: scale(1, 0.2); }
- 100% { transform: scale(1, 1); }
- }
- </style>
- </head>
- <body>
- <div class="loader">
- <div class="stair"></div>
- <div class="stair"></div>
- <div class="stair"></div>
- <div class="stair"></div>
- <div class="stair"></div>
- <div class="ball"></div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement