The modern, lightweight alternative to animated image pre-loaders
Pre-loaders are essential on the web, they enhance the user experience by providing visual feedback to the user whilst waiting for content to load. CSS3 pre-loaders are an alternative to image based pre-loaders and have the advantage of being scalable and Retina ready.
Here are 5 examples of pre-loaders that have been created using only HTML5 and CSS3. The code samples provided do not include vendor prefixes such as -webkit- and -moz-.<body style="background-color: #ffb83c;"> <div id="preloader-1"> <span></span> <span></span> </div> </body>
#preloader-1 { position:relative; } #preloader-1 span { position:absolute; border: 8px solid #fff; border-top: 8px solid transparent; border-radius:999px; } #preloader-1 span:nth-child(1){ width:80px; height:80px; animation: spin-1 2s infinite linear; } #preloader-1 span:nth-child(2){ top: 20px; left: 20px; width:40px; height:40px; animation: spin-2 1s infinite linear; } @keyframes spin-1 { 0% {transform: rotate(360deg); opacity: 1;} 50% {transform: rotate(180deg); opacity: 0.5;} 100% {transform: rotate(0deg); opacity: 1;} } @keyframes spin-2 { 0% {transform: rotate(0deg); opacity: 0.5;} 50% {transform: rotate(180deg); opacity: 1;} 100% {transform: rotate(360deg); opacity: 0.5;} }
<body style="background-color: #4ad3b4;"> <div id="preloader-2"> <span></span> <span></span> </div> </body>
#preloader-2 { position:relative; } #preloader-2 span { position:absolute; width:30px; height:30px; background: #fff; border-radius:999px; } #preloader-2 span:nth-child(1) { animation: cross-1 1.5s infinite linear; } #preloader-2 span:nth-child(2) { animation: cross-2 1.5s infinite linear; } @keyframes cross-1 { 0% {transform: translateX(0px); opacity: 1;} 50% {transform: translateX(80px); opacity: 0.5;} 100% {transform: translateX(0px); opacity: 1;} } @keyframes cross-2 { 0% {transform: translateX(80px); opacity: 1;} 50% {transform: translateX(0px); opacity: 0.5;} 100% {transform: translateX(80px); opacity: 1;} }
<body style="background-color: #ab69d9;"> <div id="preloader-3"> <span></span> </div> </body>
#preloader-3 { position:relative; animation: rotate 1s infinite linear; border: 4px solid rgba(255, 255, 255, .25); width: 80px; height: 80px; border-radius: 999px; } #preloader-3 span { position:absolute; width:80px; height:80px; border: 4px solid transparent; border-top: 4px solid #fff; top: -4px; left: -4px; border-radius:999px; } @keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
<body style="background-color: #c1d64a;"> <div id="preloader-4"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body>
#preloader-4 { position:relative; } #preloader-4 span { position:absolute; width:16px; height:16px; background: #fff; border-radius: 999px; animation: bounce 1s infinite linear; } #preloader-4 span:nth-child(1) { left: 0px; animation-delay: 0s; } #preloader-4 span:nth-child(2) { left: 20px; animation-delay: 0.25s; } #preloader-4 span:nth-child(3) { left: 40px; animation-delay: 0.5s; } #preloader-4 span:nth-child(4) { left: 60px; animation-delay: 0.75s; } #preloader-4 span:nth-child(5) { left: 80px; animation-delay: 1s; } @keyframes bounce { 0% {transform: translateY(0px); opacity: 0.5;} 50% {transform: translateY(-30px); opacity: 1;} 100% {transform: translateY(0px); opacity: 0.5;} }
<body style="background-color: #f9553f;"> <div id="preloader-5"> <span></span> <span></span> <span></span> </div> </body>
#preloader-5 { position:relative; } #preloader-5 span { position:absolute; width:50px; height:50px; border: 5px solid #fff; border-radius:999px; animation: radar 2s infinite linear; opacity: 0; } #preloader-5 span:nth-child(1) { animation-delay: 0s; } #preloader-5 span:nth-child(2) { animation-delay: 0.66s; } #preloader-5 span:nth-child(3) { animation-delay: 1.33s; } @keyframes radar { 0% {transform: scale(0); opacity: 0;} 25% {transform: scale(0); opacity: 0.5;} 50% {transform: scale(1); opacity: 1;} 75% {transform: scale(1.5); opacity: 0.5;} 100% {transform: scale(2); opacity: 0;} }
Comments