body{
  padding:0;
  margin:0;
  font-family:'Ubuntu';
  color:#ffffff;
}

#background{
  width:100%;
  height:100%;
  position:absolute;
  background:#37af49;
  transition:all 0.25s cubic-bezier(.71,.5,0,.98);
}

span{
  margin:0;
  padding:0;
  position:absolute;
  display:block;
  width:256px;
  height:64px;
  font-size:22px;
  left:64px;
  top:64px;
}

ul{
  position:absolute;
  padding:0;
  margin:0;
  left:64px;
  top:128px;
}

li{
  display:block;
  float:left;
  margin:0 16px 0 0;
  box-shadow:0 0 0 4px #ffffff;
  padding:0;
  width:32px;
  height:32px;
  cursor:pointer;
  transition:all 0.45s cubic-bezier(.71,.5,0,.98);
}

li:hover{
  box-shadow:0 0 0 2px #ffffff, inset 0 0 0 8px #ffffff;
  opacity:0.8;
}

#loader{
  margin:calc(50vh - 18px);  /* edit those margins and if needed, also the position to place the loader whereve you want */
  -webkit-transform:translateZ(0);
  -moz-transform:translateZ(0);
  transform:translateZ(0);
  width:36px;
  height:36px;
  border-radius:50%;
  display:block;
  box-shadow:0 0 0 32px #f1f2f1; /* this changes the color of the loader (in this example its the white-ish part) */
  -webkit-animation: push 2s infinite cubic-bezier(.58,1.3,.8,1.01), deform 2s infinite cubic-bezier(.58,1.3,.8,1.01);
  -moz-animation: push 2s infinite cubic-bezier(.58,1.3,.8,1.01), deform 2s infinite cubic-bezier(.58,1.3,.8,1.01);
  animation: push 2s infinite cubic-bezier(.58,1.3,.8,1.01), deform 2s infinite cubic-bezier(.58,1.3,.8,1.01);
}

/* Animations */

@-webkit-keyframes push {
    0%     {box-shadow:0 8px 0 -1px #f1f2f1;}
    12,5%  {box-shadow:0 0 0 4px #f1f2f1;}
    25%    {box-shadow:0 -8px 0 -1px #f1f2f1;}
    37.5%  {box-shadow:0 0 0 4px #f1f2f1;}
    50%    {box-shadow:8px 0 0 -1px #f1f2f1;}
    62,5%  {box-shadow:0 0 0 4px #f1f2f1;}
    75%    {box-shadow:-8px 0 0 -1px #f1f2f1;}
    87.5%  {box-shadow:0 0 0 4px #f1f2f1;}
    100%   {box-shadow:0 8px 0 -1px #f1f2f1;}
}

@-webkit-keyframes deform {
    0%     {margin-top:calc(50vh - 30px);margin-left:calc(50vw - 36px);}
    12,5%  {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    25%    {margin-top:calc(50vh - 42px);margin-left:calc(50vw - 36px);}
    37.5%  {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    50%    {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 30px);}
    62,5%  {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    75%    {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 42px);}
    87.5%  {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    100%   {margin-top:calc(50vh - 30px);margin-left:calc(50vw - 36px);}
}

@-moz-keyframes push {
    0%     {box-shadow:0 8px 0 -1px #f1f2f1;}
    12,5%  {box-shadow:0 0 0 4px #f1f2f1;}
    25%    {box-shadow:0 -8px 0 -1px #f1f2f1;}
    37.5%  {box-shadow:0 0 0 4px #f1f2f1;}
    50%    {box-shadow:8px 0 0 -1px #f1f2f1;}
    62,5%  {box-shadow:0 0 0 4px #f1f2f1;}
    75%    {box-shadow:-8px 0 0 -1px #f1f2f1;}
    87.5%  {box-shadow:0 0 0 4px #f1f2f1;}
    100%   {box-shadow:0 8px 0 -1px #f1f2f1;}
}

@-moz-keyframes deform {
    0%     {margin-top:calc(50vh - 30px);margin-left:calc(50vw - 36px);}
    12,5%  {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    25%    {margin-top:calc(50vh - 42px);margin-left:calc(50vw - 36px);}
    37.5%  {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    50%    {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 30px);}
    62,5%  {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    75%    {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 42px);}
    87.5%  {margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    100%   {margin-top:calc(50vh - 30px);margin-left:calc(50vw - 36px);}
}

@keyframes push {
    0%     {box-shadow:0 8px 0 -1px #f1f2f1;margin-top:calc(50vh - 30px);margin-left:calc(50vw - 36px);}
    12,5%  {box-shadow:0 0 0 4px #f1f2f1;margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    25%    {box-shadow:0 -8px 0 -1px #f1f2f1;margin-top:calc(50vh - 42px);margin-left:calc(50vw - 36px);}
    37.5%  {box-shadow:0 0 0 4px #f1f2f1;margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    50%    {box-shadow:8px 0 0 -1px #f1f2f1;margin-top:calc(50vh - 36px);margin-left:calc(50vw - 30px);}
    62,5%  {box-shadow:0 0 0 4px #f1f2f1;margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    75%    {box-shadow:-8px 0 0 -1px #f1f2f1;margin-top:calc(50vh - 36px);margin-left:calc(50vw - 42px);}
    87.5%  {box-shadow:0 0 0 4px #f1f2f1;margin-top:calc(50vh - 36px);margin-left:calc(50vw - 36px);}
    100%   {box-shadow:0 8px 0 -1px #f1f2f1;margin-top:calc(50vh - 30px);margin-left:calc(50vw - 36px);}
}


/* font */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://fonts.gstatic.com/s/ubuntu/v6/sDGTilo5QRsfWu6Yc11AXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}