body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: #403833; font-size: 100%; font-family: 'Open Sans'; font-weight: 100; height:100%; } .loader { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -mos-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align:center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor:default; } .loader { width:80%; height:36px; overflow:visible; } .loader div { position:absolute; width:30px; height:36px; margin:0 10px; opacity:0; animation:move 2s linear infinite; -o-animation:move 2s linear infinite; -moz-animation:move 2s linear infinite; -webkit-animation:move 2s linear infinite; transform:rotate(180deg); -o-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); color:#fff; font-size:3em; } .loader div:nth-child(8):before{ content:''; position:absolute; bottom:-15px; left:0px; width:30px; height:30px; background:#DB2F00; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .loader div:nth-child(9):before{ content:''; position:absolute; bottom:-15px; left:0px; width:30px; height:30px; background:#f2f2f2; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .loader div:nth-child(10):before{ content:''; position:absolute; bottom:-15px; left:0px; width:30px; height:30px; background:#13A3A5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .loader div:after{ content:''; position:absolute; bottom:-40px; left:0px; width:30px; height:5px; background:#39312d; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .loader div:nth-child(2) { animation-delay:0.2s; -o-animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; } .loader div:nth-child(3) { animation-delay:0.4s; -o-animation-delay:0.4s; -webkit-animation-delay:0.4s; -webkit-animation-delay:0.4s; } .loader div:nth-child(4) { animation-delay:0.6s; -o-animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; } .loader div:nth-child(5) { animation-delay:0.8s; -o-animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; } .loader div:nth-child(6) { animation-delay:1s; -o-animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; } .loader div:nth-child(7) { animation-delay:1.2s; -o-animation-delay:1.2s; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; } .loader div:nth-child(8) { animation-delay:1.4s; -o-animation-delay:1.4s; -moz-animation-delay:1.4s; -webkit-animation-delay:1.4s; } .loader div:nth-child(9) { animation-delay:1.6s; -o-animation-delay:1.6s; -moz-animation-delay:1.6s; -webkit-animation-delay:1.6s; } .loader div:nth-child(10) { animation-delay:1.8s; -o-animation-delay:1.8s; -moz-animation-delay:1.8s; -webkit-animation-delay:1.8s; } @keyframes move { 0% { right:0; opacity:0; } 35% { right: 41%; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 65% { right:59%; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { right:100%; -moz-transform:rotate(-180deg); -webkit-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } } @-moz-keyframes move { 0% { right:0; opacity:0; } 35% { right:41%; -moz-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 65% { right:59%; -moz-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { right:100%; -moz-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } } @-webkit-keyframes move { 0% { right:0; opacity:0; } 35% { right:41%; -webkit-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 75% { right:59%; -webkit-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { right:100%; -webkit-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } } @-o-keyframes move { 0% { right:0; opacity:0; } 35% { right:41%; -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 65% { right:59%; -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { right:100%; -o-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } }