<div class="holder">
  <input class="toggle" type="checkbox" />
  <div class="knob"></div>
  <div class="belt1"></div>
  <div class="belt2"></div>
  <div class="gear3"></div>
  <div class="gear9"></div>
  <div class="gear9 pos2"></div>
  <div class="gear2"></div>
  <div class="gear2 pos2"></div>
</div>

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='sGrid' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 10 0 L 0 0 0 10' fill='none' stroke='%23fff' stroke-width='0.3' stroke-opacity='0.5' /%3E%3C/pattern%3E%3Cpattern id='mGrid' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='url(%23sGrid)' /%3E%3Cpath d='M 100 0 L 0 0 0 100' fill='none' stroke='%23fff' stroke-width='2' stroke-opacity='0.2' /%3E%3C/pattern%3E%3Cpattern id='lGrid' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Crect width='200' height='200' fill='url(%23mGrid)' /%3E%3Cpath d='M 200 0 L 0 0 0 200' fill='none' stroke='%23fff' stroke-width='2' stroke-opacity='0.2' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%230071b8' /%3E%3Crect width='100%25' height='100%25' fill='url(%23lGrid)' /%3E%3C/svg%3E");
  height:100vh;
  margin:0 auto;
  overflow:hidden;
}
.holder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*  Change the height to be half the width */
  height:200px;
  width:400px;
  border-radius:999px;
  overflow:hidden;
}
.h2{
  top:calc(50% - 70px);
}
.h3{
  top:calc(50% + 70px);
}
.gear2, .gear2-2, .gear3, .gear4, .gear9, .gear9-2{
  position:absolute;
  top:50%;
  left:50%;
  height:200%;
  width:100%;
  transform:translate(-50%,-50%);
  overflow:hidden;
  z-index:-1;
}
.gear2{
  left: 75%;
  top: 96%;
  background-image: url("data:image/svg+xml,%3Csvg style='transform:scale(2.5)' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M 506.67, 500.00 505.55,503.70 511.76,511.81 510.02,524.71 489.77,524.63 488.14,511.71 494.42,503.65 493.33,500.00 494.45,496.30 488.24,488.19 489.98,475.29 510.22,475.37 511.86,488.29 505.58,496.35 Z M 496 500 A 1 1 0 0 0 504 500 A 1 1 0 0 0 496 500' fill='rgba(255,255,255,0.5)' fill-rule='evenodd' /%3E%3C/svg%3E");
  transform:translate(-50%,-50%) rotate(65deg);
}
.gear2.pos2{
  left: 25%;
  top: 4%;
  transform:translate(-50%,-50%) rotate(-25deg);
}
.gear3{
  background-image: url("data:image/svg+xml,%3Csvg style='transform: scale(2.5)' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M 515.00, 500.00 513.79,505.90 521.63,512.53 525.21,524.28 508.23,534.02 499.89,525.00 498.13,514.88 492.50,512.99 488.00,509.00 478.33,512.47 466.37,509.70 466.42,490.13 478.40,487.41 488.04,490.94 492.50,487.01 498.21,485.11 500.03,475.00 508.41,466.03 525.34,475.85 521.70,487.58 513.82,494.17 Z M 496 500 A 1 1 0 0 0 504 500 A 1 1 0 0 0 496 500' fill='rgba(255,255,255,0.5)' fill-rule='evenodd' /%3E%3C/svg%3E");
  transform:translate(-50%,-50%) rotate(12deg);
}
.gear9{
  background-image: url("data:image/svg+xml,%3Csvg style='transform: scale(2.5)' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M 440.78, 526.79 437.62,518.26 427.33,518.54 416.37,515.20 415.04,497.43 425.38,492.50 435.59,491.24 437.41,482.46 440.47,473.89 432.41,467.49 426.16,457.89 436.57,443.42 447.66,446.29 456.29,451.89 463.33,446.33 471.18,441.74 469.12,431.65 470.50,420.28 487.77,415.88 494.42,425.21 497.44,435.05 506.40,435.32 515.37,436.84 520.27,427.79 528.64,419.97 544.70,427.70 543.80,439.12 539.78,448.60 546.48,454.56 552.37,461.49 561.94,457.71 573.38,457.10 580.71,473.34 572.69,481.51 563.52,486.19 564.81,495.07 564.87,504.16 574.63,507.42 583.79,514.30 578.97,531.45 567.57,532.56 557.53,530.25 552.82,537.88 547.02,544.88 552.41,553.65 555.00,564.81 540.28,574.85 530.83,568.37 524.63,560.15 516.12,562.97 507.17,564.60 505.66,574.79 500.48,585.00 482.74,583.23 479.68,572.19 480.21,561.91 471.88,558.60 463.97,554.10 456.27,560.93 445.73,565.42 433.29,552.67 438.03,542.24 445.04,534.71 Z M 496 500 A 1 1 0 0 0 504 500 A 1 1 0 0 0 496 500' fill='rgba(255,255,255,0.5)' fill-rule='evenodd' /%3E%3C/svg%3E");
  left: 75%;
}
.gear9.pos2{
  left: 25%;
}
input{
  appearance: none;
  border: 0;
  display: block;
  position:absolute;
  height:100%;
  width: 100%;
  cursor:pointer;
  z-index: 1000;
  opacity:0;
}
.belt1 {
  position:absolute;
  height: 100%;
  width: 100%;
  transform:translate(-50%,-50%);
  top:50%;
  left:50%; 
  border-radius: 999px;
  border:15px solid #00436E;
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  user-select:none;
  pointer-events:none;
}
.belt2{
  position:absolute;
  height:10%;
  width:55%;
  border:7px solid #00436E;
  border-radius:999px;
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  opacity:0.5;
  z-index:50;
  user-select:none;
  pointer-events:none;
}
.knob {
  position: absolute;
  left: 25%;
  top: 50%;
  transform:translate(-50%,-50%);
  z-index: 100;
  width: 35%;
  height: 70%;
  border-radius: 50%;
  background-color: #ccc;
  box-shadow: 0px 4px 20px rgba(10, 19, 39, 0.3),
    0px 4px 12px rgba(10, 19, 39, 0.6), 0px 1px 1px rgba(10, 19, 39, 0.1);
  transition: 500ms linear;
  user-select:none;
  pointer-events:none;
}
.toggle:checked ~ .knob {
  left: 75%;
  border-radius:50%;
  background: #00436E;
}
.toggle:checked ~ .gear2 {
  animation:spinIt;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-delay:-325ms;
}
.toggle:checked ~ .gear2.pos2 {
  animation:spinIt;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-delay:-75ms;
}
.toggle:checked ~ .gear3 {
  animation:spinIt3;
  animation-duration:1.5s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-delay:0ms;
}
.toggle:checked ~ .gear9{
  animation:spinIt2;
  animation-duration:4.5s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}

@keyframes spinIt{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
  100%{transform:translate(-50%,-50%) rotate(-360deg)}
}
@keyframes spinIt2{
  0%{transform:translate(-50%,-50%)}
  100%{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes spinIt3{
  0%{transform:translate(-50%,-50%) rotate(12deg)}
  100%{transform:translate(-50%,-50%) rotate(-348deg)}
}