<!-- Floating Loader -->

<div class="loader"></div>
<div class="shadow"></div>

<!-- Like what you see? why not visit my website for more awesome work -->

<div class="logo">
  <a href="https://mariodesigns.co.uk/" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/MDlogo.svg" alt="Mario Designs"></a>
</div>

// Color variables
$main : #FFF5A5;
$secundary : #FFD4DA;
$terchiary : #99D2E4;

// animation keyframes
@keyframes mainAnimation {
  0% {
    width: 50px;
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  20% {
    width: 50px;
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  40% {
    width: 150px;
    transform: translateX(-50px) translateY(0px) rotate(0deg);
  }
  60% {
    width: 150px;
    transform-origin: bottom right;
    transform: translateX(-150px) translateY(0px) rotate(90deg);
  }
  80% {
    width: 50px;
    transform: translateX(-25px) translateY(0px) rotate(90deg);
  }
  100% {
    width: 50px;
    transform: translateX(-50px) translateY(0px) rotate(90deg);
  }
}
@keyframes secundaryAnimation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  20% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
  40% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
  60% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  80% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
}
@keyframes shadowAnimation {
  0% {
    width: 150px;
    transform: translateX(-25px) translateY(0px) rotate(0deg);
  }
  20% {
    width: 75px;
    transform: translateX(37.5px) translateY(0px) rotate(0deg);
  }
  40% {
    width: 200px;
    transform: translateX(-25px) translateY(0px) rotate(0deg);
  }
  60% {
    width: 75px;
    transform: translateX(37.5px) translateY(0px) rotate(0deg);
  }
  80% {
    width: 75px;
    transform: translateX(37.5px) translateY(0px) rotate(0deg);
  }
  100% {
    width: 150px;
    transform: translateX(-25px) translateY(0px) rotate(0deg);
  }
}
@keyframes float {
  0% {
    top: 50%;
  }
  50% {
    top: 51%;
  }
  100% {
    top: 50%;
  }
}

// Styling
html, body {
  height: 100%;
}
body {
  position: relative;
  background: rgb(153,210,228);
  background: linear-gradient(135deg, rgb(153,210,228) 0%,rgb(255,212,218) 100%);
}

.loader {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  background-color: $main;
  transform: translateX(0px) translateY(0px) rotate(0deg);
  animation: mainAnimation 2.6s ease 0s infinite forwards;
  z-index: 2;
  &:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    left: -50px;
    background-color: $main;
    transform-origin: top right;
    transform: translateX(0px) translateY(0px) rotate(0deg);
    animation: secundaryAnimation 2.6s ease 0s infinite forwards;
  }
}

.shadow {
  position: absolute;
  width: 100px;
  height: 10px;
  top: 50%;
  left: 50%;
  margin-top: 50px;
  margin-left: -75px;
  border-radius: 50%;
  background-color: #95a5a6;
  transform: translateX(0px) translateY(0px) rotate(0deg);
  animation: shadowAnimation 2.6s ease 0s infinite forwards,
             float 5s ease-in-out 0s infinite forwards;
  filter: blur(5px);
  z-index: 1;
}

// MD Logo - !click to see more awesome work!
.logo {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 42px;
  height: 42px;
  padding: 12px 5px;
  margin-left: -21px;
  box-sizing: border-box;
  background-color: white;
  border-radius: 50%;
  transition: transform 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  &:hover {
    transform: scale(1.4);
  }
  img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

// No JS Here...