Home Web Design CSS COG Loading Animation With Pure CSS | HTML CSS Gear Preloader

COG Loading Animation With Pure CSS | HTML CSS Gear Preloader

December 26, 2019

6390

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.

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.

<!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>

<!DOCTYPE html>

<head>

<title>COG Loading Animation | Webdevtrick.com</title>

</head>

<body>

</div>

</div>

</div>

<p>loading..</p>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* 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);
  }
}

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;

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;

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;

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.

COG Loading Animation With Pure CSS | HTML CSS Gear Preloader

Preview Of Gear Preloader

COG Loading Animation With Pure CSS Source Code

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY