body {
  background-color: #333;
}

.loading {
  position: fixed;
  float: left;
  top: 50%;
  left: 50%;
  height: 100px;
  padding: 0px;
  width: 200px;
  margin-top: -50px;
  margin-left: -70px;
}

@-webkit-keyframes loading {
  0% {
    border-top-color: #d13632;
  }
  11% {
    border-top-color: #e2571e;
  }
  22% {
    border-top-color: #E09128;
  }
  33% {
    border-top-color: #ffe400;
  }
  44% {
    border-top-color: #7dd132;
  }
  50% {
    height: 100px;
    margin-top: 0px;
  }
  55% {
    border-top-color: #32D152;
  }
  66% {
    border-top-color: #32d15b;
  }
  77% {
    border-top-color: #32bcd1;
  }
  88% {
    border-top-color: #323ad1;
  }
  99% {
    border-top-color: #cb32d1;
  }
  100% {
    border-top-color: #cb32d1;
  }
}

@keyframes loading {
  0% {
    border-top-color: #d13632;
  }
  11% {
    border-top-color: #e2571e;
  }
  22% {
    border-top-color: #E09128;
  }
  33% {
    border-top-color: #ffe400;
  }
  44% {
    border-top-color: #7dd132;
  }
  50% {
    height: 100px;
    margin-top: 0px;
  }
  55% {
    border-top-color: #32D152;
  }
  66% {
    border-top-color: #32d15b;
  }
  77% {
    border-top-color: #32bcd1;
  }
  88% {
    border-top-color: #323ad1;
  }
  99% {
    border-top-color: #cb32d1;
  }
  100% {
    border-top-color: #cb32d1;
  }
}

.loading .loading-1 {
  height: 10px;
  width: 10px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-top: 5px solid #333;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.loading .loading-2 {
  height: 10px;
  width: 10px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-top: 5px solid #333;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.loading .loading-3 {
  height: 10px;
  width: 10px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-top: 5px solid #333;
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}
.loading .loading-4 {
  height: 10px;
  width: 10px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-top: 5px solid #333;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.loading .loading-5 {
  height: 10px;
  width: 10px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-top: 5px solid #333;
  -webkit-animation-delay: 1.25s;
  animation-delay: 1.25s;
}
.loading .loading-6 {
  height: 10px;
  width: 10px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-top: 5px solid #333;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.loading .loading-7 {
  height: 10px;
  width: 10px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-top: 5px solid #333;
  -webkit-animation-delay: 1.75s;
  animation-delay: 1.75s;
}
.loading .loading-8 {
  height: 10px;
  width: 10px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-top: 5px solid #333;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.loading .loading-9 {
  height: 10px;
  width: 10px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-top: 5px solid #333;
  -webkit-animation-delay: 2.25s;
  animation-delay: 2.25s;
}
.loading .loading-10 {
  height: 10px;
  width: 10px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-top: 5px solid #333;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}