A loader is a beneficial element for all the projects related to the web. Therefore, we have to use the loader during page or content loading. So, when we use Ajax to update parts of a web page, related content will have to be received for some time. Thus, the preloader is a precise option to notify the user to wait. You can use an image as a preloader, or you can make a CSS loader. If you want to make loader animation with CSS. Therefore, this tutorial will help you to create lightweight and straightforward loader animation. Here we’ll give you a short CSS code snippet to Create Loader Animation with CSS and HTML.
Loader Style 1
The following CSS will make a spinner loader. So, you can change the loader color and size as per your website layout.
CSS Code:
.loader { border-top: 16px solid #4285F4; border-right: 16px solid #EA4335; border-bottom: 16px solid #FBBC05; border-left: 16px solid #34A853; border-radius: 50%; width: 120px; height: 120px; -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
HTML Code:
<div class="loader"></div>
SEE ALSO: File Type (extension) Validation with JavaScript
Loader Style 2
The following CSS generates an animated loader. So, you can change the loader colour and size as per your website layout.
CSS Code:
.loader, .loader:before, .loader:after { background: #000000; -webkit-animation: animate 1s infinite ease-in-out; animation: animate 1s infinite ease-in-out; width: 1em; height: 4em; } .loader { color: #000000; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .loader:before, .loader:after { position: absolute; top: 0; content: ''; } .loader:before { left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loader:after { left: 1.5em; } @-webkit-keyframes animate { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } } @keyframes animate { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } }
HTML Code:
<div class="loader"></div>
Also, read our previous blog- How to Generate QR Code with PHP using Google Chart API