"Preloader for website" is a very important element or section for any website developer. In the website development world, a lot of website loader animations available which look very great and attractive but some of them have more loading time that makes our website response time slow. If our site has a low response time that is not good for us and as well as our visitors. A lot of web loaders have very huge css code that impacts our website loading time. You can check out our article which has more than 35 fancy loaders.
So in this post, we will learn how to create a website loader animation using only html and css. This loader has three dots and all the dots will change their size one by one. This animation looks very attractive and lightweight.
1. HTML
<!DOCTYPE html> <html> <head> <title>Three Dot Loader</title> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="dot-container"> <div class="dot dot-1"></div> <div class="dot dot-2"></div> <div class="dot dot-3"></div> </div> </div> </body> </html>
2. CSS
body{ background-color: #344; } .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .dot-container{ display: flex; align-items: center; justify-content: space-between; width: 120px; } .dot{ width: 24px; height: 24px; border-radius: 50%; background: #3ff9dc; } .dot-1{ animation-name: flow; animation-duration: .4s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; } .dot-2{ animation: flow .4s ease .2s infinite alternate; } .dot-3{ animation: flow .4s ease .4s infinite alternate; }
3. ANIMATION CSS
@keyframes flow { from{ opacity:1; transform: scale(1.2); } to{ opacity: .20; transform: scale(.75); } }
Comments
Post a Comment