<div class="e-loadholder">
  <div class="m-loader">
    <span class="e-text">Loading</span>
  </div>
</div>
<div id="particleCanvas-Blue"></div>
<div id="particleCanvas-White"></div>

$f-title:'Roboto', sans-serif;
$f-body:'Open Sans', sans-serif;

@mixin centre($axis: "both") {
  position: absolute;
  @if $axis == "y" {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  @if $axis == "x" {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  @if $axis == "both" {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-51%, -50%);
    -moz-transform: translate(-51%, -50%);
    -ms-transform: translate(-51%, -50%);
    -o-transform: translate(-51%, -50%);
    transform: translate(-51%, -50%);
  }
}
@mixin font-size($sizeValue: 1.6, $lineHeight: 2.4) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
  line-height: ($lineHeight * 10) + px;
}
@mixin animation($animate...) {
    $max: length($animate);
    $animations: '';

    @for $i from 1 through $max {
        $animations: #{$animations + nth($animate, $i)};

        @if $i < $max {
            $animations: #{$animations + ", "};
        }
    }
    -webkit-animation: $animations;
    -moz-animation:    $animations;
    -o-animation:      $animations;
    animation:         $animations;
}
@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

@include keyframes(outerRotate1) {
  0%   {transform:translate(-50%, -50%) rotate(0)}
  100% {transform:translate(-50%, -50%) rotate(360deg)}
}
@include keyframes(outerRotate2) {
  0%   {transform:translate(-50%, -50%) rotate(0)}
  100% {transform:translate(-50%, -50%) rotate(-360deg)}
}

@include keyframes(textColour) {
  0%   {color:#fff;}
  100% {color:#3BB2D0;}
}


html{
  font-size:62.5%;
}

body{
  margin:0;
  padding:0;
  font-family:$f-body;
  width:100vw;
  height:100vh;
  background:#222;
}

.e-loadholder{
  @include centre();
  width:240px;
  height:240px;
  border:5px solid #1B5F70;
  border-radius:120px;
  box-sizing:border-box;
  
  
  &:after{
    @include centre;
    content:" ";
    display:block;
    background:#222;
    transform-origin:center;
    z-index:0;
  }
  
  &:after{
    width:100px;
    height:200%;
    @include animation('outerRotate2 30s infinite linear');
  }

  .m-loader{
    @include centre();
    width:200px;
    height:200px;
    color:#888;
    text-align:center;
    border:5px solid lighten(#1B5F70, 15%);
    border-radius:100px;
    box-sizing:border-box;
    z-index:20;
    text-transform:uppercase;

    &:after{
      @include centre;
      content:" ";
      display:block;
      background:#222;
      transform-origin:center;
      z-index:-1;
    }

    &:after{
      width:100px;
      height:106%;
      @include animation('outerRotate1 15s infinite linear');
    }

    .e-text{
      @include font-size(1.4, 13);
      @include centre();
      @include animation('textColour 1s alternate linear infinite');
      display:block;
      width:140px;
      height:140px;
      text-align:center;
      border:5px solid lighten(#1B5F70, 25%);
      border-radius:70px;
      box-sizing:border-box;
      z-index:20;

      &:before, &:after{
        @include centre;
        content:" ";
        display:block;
        background:#222;
        transform-origin:center;
        z-index:-1;
      }

      &:before{
        width:110%;
        height:40px;
        @include animation('outerRotate2 3.5s infinite linear');
      }
      &:after{
        width:40px;
        height:110%;
        @include animation('outerRotate1 8s infinite linear');
      }
    }
  }
}

#particleCanvas-White{
  @include centre();
  width:100%;
  height:50%;
  opacity:0.1;
}

#particleCanvas-Blue{
  @include centre();
  width:300px;
  height:300px;
}

particlesJS("particleCanvas-Blue", {
  particles: {
    number: {
      value: 100,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: "#1B5F70"
    },
    shape: {
      type: "circle",
      stroke: {
        width: 0,
        color: "#000000"
      },
      polygon: {
        nb_sides: 3
      },
      image: {
        src: "img/github.svg",
        width: 100,
        height: 100
      }
    },
    opacity: {
      value: 0.5,
      random: false,
      anim: {
        enable: true,
        speed: 1,
        opacity_min: 0.1,
        sync: false
      }
    },
    size: {
      value: 10,
      random: true,
      anim: {
        enable: false,
        speed: 10,
        size_min: 0.1,
        sync: false
      }
    },
    line_linked: {
      enable: false,
      distance: 150,
      color: "#ffffff",
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 0.5,
      direction: "none",
      random: true,
      straight: false,
      out_mode: "bounce",
      bounce: false,
      attract: {
        enable: false,
        rotateX: 394.57382081613633,
        rotateY: 157.82952832645452
      }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: true,
        mode: "grab"
      },
      onclick: {
        enable: false,
        mode: "push"
      },
      resize: true
    },
    modes: {
      grab: {
        distance: 200,
        line_linked: {
          opacity: 0.2
        }
      },
      bubble: {
        distance: 1500,
        size: 40,
        duration: 7.272727272727273,
        opacity: 0.3676323676323676,
        speed: 3
      },
      repulse: {
        distance: 50,
        duration: 0.4
      },
      push: {
        particles_nb: 4
      },
      remove: {
        particles_nb: 2
      }
    }
  },
  retina_detect: true
});

particlesJS("particleCanvas-White", {
  particles: {
    number: {
      value: 250,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: "#ffffff"
    },
    shape: {
      type: "circle",
      stroke: {
        width: 0,
        color: "#000000"
      },
      polygon: {
        nb_sides: 3
      },
      image: {
        src: "img/github.svg",
        width: 100,
        height: 100
      }
    },
    opacity: {
      value: 0.5,
      random: true,
      anim: {
        enable: false,
        speed: 0.2,
        opacity_min: 0,
        sync: false
      }
    },
    size: {
      value: 15,
      random: true,
      anim: {
        enable: true,
        speed: 10,
        size_min: 0.1,
        sync: false
      }
    },
    line_linked: {
      enable: false,
      distance: 150,
      color: "#ffffff",
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 0.5,
      direction: "none",
      random: true,
      straight: false,
      out_mode: "bounce",
      bounce: false,
      attract: {
        enable: true,
        rotateX: 3945.7382081613637,
        rotateY: 157.82952832645452
      }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: false,
        mode: "grab"
      },
      onclick: {
        enable: false,
        mode: "push"
      },
      resize: true
    },
    modes: {
      grab: {
        distance: 200,
        line_linked: {
          opacity: 0.2
        }
      },
      bubble: {
        distance: 1500,
        size: 40,
        duration: 7.272727272727273,
        opacity: 0.3676323676323676,
        speed: 3
      },
      repulse: {
        distance: 50,
        duration: 0.4
      },
      push: {
        particles_nb: 4
      },
      remove: {
        particles_nb: 2
      }
    }
  },
  retina_detect: true
});