<div class="page-preloader"> <div class="preloader"> <b>L</b><b>O</b><b>A</b><b>D</b><b>I</b><b>N</b><b>G</b> </div> </div>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 14px; line-height: 28px; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page-preloader { background: -webkit-linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); background-image: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; } .preloader { width: 100%; text-align: center; } .preloader>b { display: inline-block; font-size: 30px; line-height: 1.5; -webkit-animation: flip 3s ease-out infinite; animation: flip 3s ease-out infinite; text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.45); } .preloaderr>b:first-of-type { -webkit-animation-delay: 0s; animation-delay: 0s } .preloader>b:nth-of-type(2) { -webkit-animation-delay: .1s; animation-delay: .1s } .preloader>b:nth-of-type(3) { -webkit-animation-delay: .2s; animation-delay: .2s } .preloader>b:nth-of-type(4) { -webkit-animation-delay: .3s; animation-delay: .2s } .preloader>b:nth-of-type(5) { -webkit-animation-delay: .4s; animation-delay: .4s } .loader>b:nth-of-type(6) { -webkit-animation-delay: .5s; animation-delay: .5s } .preloader>b:last-of-type { -webkit-animation-delay: .6s; animation-delay: .6s } @keyframes flip { 0% { color: #444; font-weight: 400; letter-spacing: -.1em } 30%,70% { color: #444; font-weight: 400 } 35%,65% { color: #444; font-weight: 700; -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); transform: rotateY(0) } 40% { color: #f75353 } 45% { color: #51d466 } 50% { color: #fcd419; font-weight: 700; letter-spacing: .3em; -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg) } 55% { color: #cb79e6 } 60% { color: #609cec } 100% { color: #444; letter-spacing: -.1em; font-weight: 400 } }