Fidget Loader

codespector.css

/**
 * Fidget Loader
 */

body {  width: 100%;  height: 100vh;  filter: url("#goo");  -webkit-filter: url("#goo");  background: #222;}body svg {  position: absolute;}body .wrap {  position: absolute;  left: 50%;  top: 50%;  transform: translateX(-50%) translateY(-50%);  margin-top: -30px;  height: 100px;  animation: colorshift 3s linear infinite;}@keyframes colorshift {  0% {    filter: hue-rotate(0deg);  }  100% {    filter: hue-rotate(360deg);  }}body .wrap .circle {  width: 30px;  height: 30px;  border-radius: 100%;  background: #fff968;  position: absolute;  transform-origin: 50% 170%;}body .wrap .circle:nth-of-type(1) {  transform: rotate(10deg);  animation: bump1 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump1 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(20deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(2) {  transform: rotate(20deg);  animation: bump2 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump2 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(40deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(3) {  transform: rotate(30deg);  animation: bump3 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump3 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(60deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(4) {  transform: rotate(40deg);  animation: bump4 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump4 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(80deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(5) {  transform: rotate(50deg);  animation: bump5 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump5 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(100deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(6) {  transform: rotate(60deg);  animation: bump6 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump6 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(120deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(7) {  transform: rotate(70deg);  animation: bump7 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump7 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(140deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(8) {  transform: rotate(80deg);  animation: bump8 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump8 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(160deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(9) {  transform: rotate(90deg);  animation: bump9 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump9 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(180deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(10) {  transform: rotate(100deg);  animation: bump10 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump10 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(200deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(11) {  transform: rotate(110deg);  animation: bump11 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump11 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(220deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(12) {  transform: rotate(120deg);  animation: bump12 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump12 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(240deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(13) {  transform: rotate(130deg);  animation: bump13 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump13 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(260deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(14) {  transform: rotate(140deg);  animation: bump14 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump14 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(280deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(15) {  transform: rotate(150deg);  animation: bump15 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump15 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(300deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(16) {  transform: rotate(160deg);  animation: bump16 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump16 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(320deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(17) {  transform: rotate(170deg);  animation: bump17 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump17 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(340deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap .circle:nth-of-type(18) {  transform: rotate(180deg);  animation: bump18 4s ease-in-out infinite;  animation-delay: -1s;}@keyframes bump18 {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(360deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}body .wrap:nth-of-type(2) {  margin-top: 35px;  margin-left: 40px;}body .wrap:nth-of-type(2) .circle {  animation-direction: reverse;  animation-delay: -3s;}body .wrap:nth-of-type(3) {  margin-top: 35px;  margin-left: -40px;}body .wrap:nth-of-type(3) .circle {  animation-delay: -2s;}

codespector.html

<div class='wrap'>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div></div><div class='wrap'>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div></div><div class='wrap'>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div>  <div class='circle'></div></div><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" /><feComposite in="SourceGraphic" in2="goo" operator="atop"/></filter></defs></svg>

codespector.js

// alert('Welcome to codespector!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","codespector_bootstrap":"","codespector_jquery":"","page":"all"}