During website designing we can make it more impressive by using CSS preloader. During the ajax call preloader can be a important features for monitoring Ajax request.
Here, today we cover about pre-loaders which are useful for making a beautiful website design. Most of the websites covered the loading process with many animated preloaders. Some of the preloaders are developed by preloader jquery.
Here, today we cover about pre-loaders which are useful for making a beautiful website design. Most of the websites covered the loading process with many animated preloaders. Some of the preloaders are developed by preloader jquery.
Check live view below
The most important thing on websites is the speed of the website. So for developing an optimized website we use HTML and CSS preloader. Today we will show you how to design an Infinite CSS preloader. Using HTML5 and CSS we make an Awesome infinite CSS loading animation. Here we will check out the preloader source code.InfiniteLoading.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Infinite Loading</title> <link rel="stylesheet" type="text/css" href="InfiniteLoading.css"> </head> <body> <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html> |
Now we create Dots structure using CSS an. Below I explain all the code part vise and after that gives you complete preloader code.
On body tag CSS, we set the background color, height with VH means vertical height. Making body background responsive or look the same in all screen size.
Below code,
|
1 2 3 4 5 6 7 8 9 |
body{ margin: 0; padding: 0;; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #3f51b5; } |
Now we set the position of our CSS loader on the middle or fix at all screen sizes. For set the preloader position at the middle on all screen size we use below code,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.loader{ position: relative; display: flex; } .loader span{ display: block; width: 20px; height: 20px; background: #fff; border-radius: 50%; margin: 0 5px; box-shadow: 0 2px 2px rgba(0,0,0,.2) } |
On above code we also make dots design using border CSS property. Now we code for animate infinite loop or for infinte preloader. Here is the code,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.loader span:not(:last-child) { animation: animate 1s linear infinite; } .loader span:last-child { animation: jump 1s ease-in-out infinite; } @keyframes animate{ 0%{ transform: translateX(0); } 100%{ transform: translateX(30px); } } @keyframes jump { 0%{ transform: translate(0,0); } 10%{ transform: translate(10px,-10px); } 20%{ transform: translate(20px,10px); } 30%{ transform: translate(30px,-50px); } 70%{ transform: translate(-150px,-50px); } 80%{ transform: translate(-140px,10px); } 90%{ transform: translate(-130px,-10px); } 100%{ transform: translate(-120px,0); } } |
Now you can check complete code,
InfiniteLoading.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
body{ margin: 0; padding: 0;; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #3f51b5; } .loader{ position: relative; display: flex; } .loader span{ display: block; width: 20px; height: 20px; background: #fff; border-radius: 50%; margin: 0 5px; box-shadow: 0 2px 2px rgba(0,0,0,.2) } .loader span:not(:last-child) { animation: animate 1s linear infinite; } .loader span:last-child { animation: jump 1s ease-in-out infinite; } @keyframes animate{ 0%{ transform: translateX(0); } 100%{ transform: translateX(30px); } } @keyframes jump { 0%{ transform: translate(0,0); } 10%{ transform: translate(10px,-10px); } 20%{ transform: translate(20px,10px); } 30%{ transform: translate(30px,-50px); } 70%{ transform: translate(-150px,-50px); } 80%{ transform: translate(-140px,10px); } 90%{ transform: translate(-130px,-10px); } 100%{ transform: translate(-120px,0); } } |
Live View
Happy Coding..!
Was this article helpful?
YesNo