.loader-container {
  display: inline-block;
  display: -webkit-inline-box;
  position: relative;
  height: 35px; 
  width: 35px; 
  margin-bottom: -16px; 
}

.spinner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
.spinner .loader {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border-style: solid;
  -webkit-animation: loader 500ms linear infinite;
  animation: loader 500ms linear infinite;
}
.spinner .loader.ball {
  box-shadow: inset 5px 5px 0 10px #df4320;
}
.spinner .loader.spin {
  border-width: 1px 1px 2px;
  border-color: #df4320;
  box-shadow: 0 1px #df4320;
}
.spinner .loader.single {
  border-width: 1px;
  border-color: #df4320 transparent transparent;
}
.spinner .loader.double {
  border-width: 1px;
  border-color: #df4320 transparent;
}
.spinner .loader.triple {
  border-width: 1px;
  border-color: #df4320;
  border-top-color: transparent;
}
.spinner .loader.dots {
  -webkit-animation-timing-function: steps(8);
  animation-timing-function: steps(8);
}
.spinner .loader.dots:before, .spinner .loader.dots:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 100%;
  background: #df4320;
}
.spinner .loader.dots:before {
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 20px 20px rgba(223, 67, 32, 0.8), 14px 6px rgba(223, 67, 32, 0.9), 14px 34px rgba(223, 67, 32, 0.7);
}
.spinner .loader.dots:after {
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(223, 67, 32, 0.6);
  box-shadow: -20px -20px rgba(223, 67, 32, 0.4), -14px -6px rgba(223, 67, 32, 0.5), -14px -34px rgba(223, 67, 32, 0.3);
}

@-webkit-keyframes loader {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loader {
  to {
    transform: rotate(360deg);
  }
}