Hello Coders, hope you all guys are doing well. Today I designed a beautiful animated pre loader which is use for pre loading time animation. Hope you all are like it.
See below for Live design.
This preloader is designed with only using CSS3 and HTML5, see below code and paste on your code editor and also customize your own.
Loader.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Glowing Loader</title> <link rel="stylesheet" type="text/css" href="loaderRing.css"> </head> <body> <div class="loader"> <div class="face face1"> <div class="circle"></div> </div> <div class="face face2"> <div class="circle"></div> </div> </div> </body> </html> |
loaderRing.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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
body{ margin: 0; padding: 0; background:#060606; } .loader{ position: absolute; top: 50%; left: 50%; <span style="color: #008000"><strong>//This shows round animation with axis like x and Y</strong></span> transform: translate(-50%,-50%); width: 200px; height: 200px; box-sizing: border-box; background:#000; } .loader .face { position: absolute; border:2px solid #121212; } .loader .face.face1{ top: 0; left: 0; right: 0; bottom: 0; background:#090909; box-shadow: 0 0 10px rgba(0,0,0,1); border-radius: 50%; border-left: 2px solid #ffff00; border-top: 2px solid #ffff00; animation: animate 3s linear infinite; } .loader .face.face2{ top: 30px; left: 30px; right: 30px; bottom: 30px; background:#090909; box-shadow: 0 0 10px rgba(0,0,0,1); border-radius: 50%; border-right: 2px solid #03a9f4; border-bottom: 2px solid #03a9f4; <span style="color: #008000"><strong>//here you can define infine round loop with 3 second time</strong></span> animation: animate 3s linear reverse infinite; } .loader .face .circle{ position: absolute; top: calc(50% - 1px); left: 50%; width: 50%; height: 2px; transform-origin: left; } <span style="color: #008000"><strong>//for rotation of the circle with angle</strong></span> .loader .face.face1 .circle{ transform: rotate(-45deg); } .loader .face.face2 .circle{ transform: rotate(-45deg); } .loader .face .circle:before{ content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background:#fff; top:-4px; right: -6px; } .loader .face.face1 .circle:before{ background:#ffff00; box-shadow: 0 0 20px #ff0, 0 0 40px #ff0, 0 0 60px #ff0, 0 0 80px #ff0, 0 0 100px #ff0, 0 0 0 5px rgba(255,255,0,.1); } .loader .face.face2 .circle:before{ background:#03a9f4; box-shadow: 0 0 20px #03a9f4, 0 0 40px #03a9f4, 0 0 60px #03a9f4, 0 0 80px #03a9f4, 0 0 100px #03a9f4, 0 0 0 5px rgba(3,169,244,.1); } @keyframes animate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } |
This the complete CSS where you can edit as you can and make new design.
Was this article helpful?
YesNo
Stripe Payment API integration and Card save and delete operation in Codeigniter
magnificent submit, very informative. I wonder why the opposite specialists of this sector do not understand this. You must proceed your writing. I’m confident, you have a great readers’ base already!
I was just looking for this info for a while. After 6 hours of continuous Googleing, finally I got it in your web site. I wonder what’s the lack of Google strategy that do not rank this type of informative websites in top of the list. Generally the top web sites are full of garbage.
Hiya, I am really glad I have found this info. Nowadays bloggers publish just about gossips and internet and this is actually irritating. A good site with interesting content, this is what I need. Thank you for keeping this web site, I’ll be visiting it. Do you do newsletters? Can not find it.
It¡¦s really a great and helpful piece of information. I¡¦m satisfied that you shared this helpful information with us. Please keep us informed like this. Thank you for sharing.