Gooey Beach Ball Loader

Gooey Beach Ball Loader.markdown

Gooey Beach Ball Loader

Testing Goo Blending of Colours

Forked from Emmanuel Pilande's Pen Beach Ball Loader.

A Pen by Henri Kuschkowitz on CodePen.

License.

index.html

- var dots = 8;

.container
  - for (var i = 0; i < dots; i++)
    .dot
      span


svg
  defs
    filter#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 21 -9', result='goo')
      feComposite(in='SourceGraphic', in2='goo', operator='atop')
      

style.css

$dots: 8;
$dot-width: 24px;
$dot-height: $dot-width;
$angle: 360 / $dots;
$rotate: 0;

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  //animation: rotate 4s linear 0s infinite;
  //filter: url('#goo');
  background:transparent;
  -webkit-filter: contrast(10);
  -moz-filter: contrast(10);
  -o-filter: contrast(10);
  -ms-filter: contrast(10);
  filter: contrast(10);
  background: #000000;
}

.dot {
  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($dot-height / 2);
  margin-left: -($dot-width / 2);
  @for $i from 1 through $dots {
    $color: hsl($i * 360 / $dots, 80%, 70%);
    $rotate: $rotate + $angle;
    &:nth-child(#{$i}) {
      transform: translate($dot-height / 2) rotate(#{$rotate + 90}deg);

      span {
        background-color: $color;
        -webkit-filter: blur($dot-height / 4);
        -moz-filter: blur(15px);
        -o-filter: blur(15px);
        -ms-filter: blur(15px);
        filter: blur(2px);        
      }
    }
  }
  span {
    position: absolute;
    width: $dot-width;
    height: $dot-height;
    border-radius: 50%;
    animation: 2s pop 0s ease-in-out infinite;
    
  }
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #136a8a 10%, #267871 90%);
}

@keyframes rotate {
  0% {
    transform:  rotate(0);
  }
  100% {
    transform:  rotate(360deg);
  }
}

@keyframes pop {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(75px);
  }
  100% {
    transform: translateX(0);
  }
}