How we can create a cog or gear loader animation using pure HTML and CSS? Solution: See this COG Loading Animation With Pure CSS, HTML CSS Gear Preloader.
Previously I have shared a loader animation pack with 12 different types of animation, but this is a cog/gear type loader. Basically, preloaders or loaders are the animation effect that you see on the screen while the page is loading. Preloaders animations used to entertain visitors while server operations finish processing.
Today you will learn to create HTML CSS Gear Preloader. Basically, there are 3 COG or GEAR which is rotating continuously like a working engine. The 3 cogs have different colors and shape, the first one is large, the second one smaller than the first cog, and the last cog is smaller than the others 2. Bellow the COGs there is a text “Loading“, which is for showing that this is a loading animation.
So, Today I am sharing COG Loading Animation With Pure CSS. There I have used pure CSS and HTML for creating the whole animation, without JS or any library. If you want a good preloader animation for your website, then you can use this after making changes according to your choice. You can change color and speed after some changes.
If you are thinking now how this loader animation actually is, then see the preview given below.
Preview Of Gear Preloader
See this video preview to getting an idea of how this loading animation looks like.
Live Demo
Now you can see this visually, also you can see it live by pressing the button given above. If you like this loader animation, then get the source code of its.
You May Also Like:
COG Loading Animation With Pure CSS Source Code
Before sharing source code, let’s talk about it. First I have created the main div with class name ‘loader‘ and put another div inside it. Inside these two divs, I have placed 3 other sections to create the 3 gears. Each gear or cog div has 4 divs inside, 3 for creating the shape and other 1 for the circle in middle.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. For creating the gear shape I have used three rectangles which are based on 3 divs in every section. I have just rotated those rectangular divs in 30 degrees, 60 degrees, and 90 degrees. After that, I have used border-radius for making circular edges.
And for creating the continuously moving effect, I have used CSS @keyframe command and rotated all divs for creating the effect. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this loader you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
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 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>COG Loading Animation | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class='loader'> <div class='loader_cogs'> <div class='COGfirst'> <div class='firstPart'></div> <div class='firstPart'></div> <div class='firstPart'></div> <div class='firstHole'></div> </div> <div class='COGsecond'> <div class='secondPart'></div> <div class='secondPart'></div> <div class='secondPart'></div> <div class='secondHole'></div> </div> <div class='COGthird'> <div class='thirdPart'></div> <div class='thirdPart'></div> <div class='thirdPart'></div> <div class='thirdHole'></div> </div> <p>loading..</p> </div> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); body { height: 100vh; font-family: "Montserrat", sans-serif; text-align: center; overflow: hidden; } body p { margin: 0 auto; font-size: 18px; } body .loader { height: 100%; margin: auto; width: 400px; } body .loader_cogs { width: 100px; height: 100px; top: -120px !important; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } body .COGfirst { position: relative; width: 100px; height: 100px; -webkit-transform-origin: 50px 50px; transform-origin: 50px 50px; -webkit-animation: rotate 10s infinite linear; animation: rotate 10s infinite linear; } body .COGfirst div:nth-of-type(1) { -webkit-transform: rotate(30deg); transform: rotate(30deg); } body .COGfirst div:nth-of-type(2) { -webkit-transform: rotate(60deg); transform: rotate(60deg); } body .COGfirst div:nth-of-type(3) { -webkit-transform: rotate(90deg); transform: rotate(90deg); } body .COGfirst div.firstPart { width: 100px; border-radius: 15px; position: absolute; height: 100px; background: #ff4242; } body .COGfirst div.firstHole { width: 50px; height: 50px; border-radius: 100%; background: white; position: absolute; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } body .COGsecond { position: relative; width: 80px; -webkit-transform: rotate(16deg); transform: rotate(16deg); top: 28px; -webkit-transform-origin: 40px 40px; transform-origin: 40px 40px; animation: rotate_left 10s .1s infinite reverse linear; left: -24px; height: 80px; } body .COGsecond div:nth-of-type(1) { -webkit-transform: rotate(30deg); transform: rotate(30deg); } body .COGsecond div:nth-of-type(2) { -webkit-transform: rotate(60deg); transform: rotate(60deg); } body .COGsecond div:nth-of-type(3) { -webkit-transform: rotate(90deg); transform: rotate(90deg); } body .COGsecond div.secondPart { width: 80px; border-radius: 10px; position: absolute; height: 80px; background: #208bfd; } body .COGsecond div.secondHole { width: 40px; height: 40px; border-radius: 100%; background: white; position: absolute; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } body .COGthird { position: relative; width: 60px; top: -65px; -webkit-transform-origin: 30px 30px; transform-origin: 30px 30px; -webkit-animation: rotate_left 10.2s .4s infinite linear; animation: rotate_left 10.2s .4s infinite linear; -webkit-transform: rotate(4deg); transform: rotate(4deg); left: 79px; height: 60px; } body .COGthird div:nth-of-type(1) { -webkit-transform: rotate(30deg); transform: rotate(30deg); } body .COGthird div:nth-of-type(2) { -webkit-transform: rotate(60deg); transform: rotate(60deg); } body .COGthird div:nth-of-type(3) { -webkit-transform: rotate(90deg); transform: rotate(90deg); } body .COGthird div.thirdPart { width: 60px; border-radius: 8px; position: absolute; height: 60px; background: #212121; } body .COGthird div.thirdHole { width: 30px; height: 30px; border-radius: 100%; background: white; position: absolute; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /* Animations */ @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotate_left { from { -webkit-transform: rotate(16deg); transform: rotate(16deg); } to { -webkit-transform: rotate(376deg); transform: rotate(376deg); } } @keyframes rotate_left { from { -webkit-transform: rotate(16deg); transform: rotate(16deg); } to { -webkit-transform: rotate(376deg); transform: rotate(376deg); } } @-webkit-keyframes rotate_right { from { -webkit-transform: rotate(4deg); transform: rotate(4deg); } to { -webkit-transform: rotate(364deg); transform: rotate(364deg); } } @keyframes rotate_right { from { -webkit-transform: rotate(4deg); transform: rotate(4deg); } to { -webkit-transform: rotate(364deg); transform: rotate(364deg); } } |
That’s It. Now you have successfully created COG Loading Animation With Pure CSS, HTML CSS Gear Preloader. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
