/* Loader Version 1 */
.loader.loader-1 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
}
.loader.loader-1::before, .loader.loader-1::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #FFF;
  animation: prixClipFix 2s linear infinite;
}
.loader.loader-1::after {
  border-color: #FF3D00;
  animation: prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse;
  inset: 6px;
}

/* Loader Version 2 */
.loader.loader-2 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
}
.loader.loader-2::before, .loader.loader-2::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #FFF;
  animation: prixClipFix 2s linear infinite;
}
.loader.loader-2::after {
  transform: rotate3d(90, 90, 0, 180deg);
  border-color: #FF3D00;
}

/* Loader Version 3 */
.loader.loader-3 {
  width: 48px;
  height: 48px;
  border: 3px solid #FFF;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader.loader-3::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid;
  border-color: #FF3D00 transparent;
}

/* Loader Version 4 */
.loader.loader-4 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #FFF #FFF transparent transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader.loader-4::after,
.loader.loader-4::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent #FF3D00 #FF3D00;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}
.loader.loader-4::before {
  width: 32px;
  height: 32px;
  border-color: #FFF #FFF transparent transparent;
  animation: rotation 1.5s linear infinite;
}

/* Loader Version 5 */
.loader.loader-5 {
  width: 48px;
  height: 48px;
  border: 3px dotted #FFF;
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}
.loader.loader-5::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted #FF3D00;
  border-style: solid solid dotted;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack 1s linear infinite;
  transform-origin: center center;
}

/* Loader Version 6 */
.loader.loader-6 {
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: #fff;
}
.loader.loader-6::before,
.loader.loader-6::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: spin 1s linear infinite;
}
.loader.loader-6::after {
  color: #FF3D00;
  transform: rotateY(70deg);
  animation-delay: .4s;
}

/* Loader Version 7 */
.loader.loader-7 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid #FFF;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader.loader-7::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-left: 4px solid #FF3D00;
  border-bottom: 4px solid transparent;
  animation: rotation 0.5s linear infinite reverse;
}

/* Loader Version 8 */
.loader.loader-8 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid #FFF;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader.loader-8::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-bottom: 4px solid #FF3D00;
  border-left: 4px solid transparent;
}

/* Loader Version 9 */
.loader.loader-9 {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #de3500 #0000 #fff #0000;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotate 1s linear infinite;
}
.loader.loader-9::before, .loader.loader-9::after {
  content: '';
  top: 0;
  left: 0;
  position: absolute;
  border: 10px solid transparent;
  border-bottom-color: #fff;
  transform: translate(-10px, 19px) rotate(-35deg);
}
.loader.loader-9::after {
  border-color: #de3500 transparent transparent transparent;
  transform: translate(32px, 3px) rotate(-35deg);
}

/* Loader Version 10 */
.loader.loader-10 {
  position: relative;
  width: 75px;
  height: 100px;
  background-repeat: no-repeat;
  background-image: linear-gradient(#DDD 50px, transparent 0),
                    linear-gradient(#DDD 50px, transparent 0),
                    linear-gradient(#DDD 50px, transparent 0),
                    linear-gradient(#DDD 50px, transparent 0),
                    linear-gradient(#DDD 50px, transparent 0);
  background-size: 8px 100%;
  background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
  animation: pillerPushUp 4s linear infinite;
}
.loader.loader-10::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 10px;
  height: 10px;
  background: #de3500;
  border-radius: 50%;
  animation: ballStepUp 4s linear infinite;
}

/* Loader Version 11 */
.loader.loader-11 {
  display: block;
  position: relative;
  height: 12px;
  width: 80%;
  border: 1px solid #fff;
  border-radius: 10px;
  overflow: hidden;
}
.loader.loader-11::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #FF3D00;
  animation: prog 6s ease-in infinite;
}

/* Shared Keyframes */
@keyframes rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@keyframes rotation {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@keyframes rotationBack {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(-360deg);}
}
@keyframes spin {
  0%, 100% {box-shadow: .2em 0px 0 0px currentcolor;}
  12% {box-shadow: .2em .2em 0 0 currentcolor;}
  25% {box-shadow: 0 .2em 0 0px currentcolor;}
  37% {box-shadow: -.2em .2em 0 0 currentcolor;}
  50% {box-shadow: -.2em 0 0 0 currentcolor;}
  62% {box-shadow: -.2em -.2em 0 0 currentcolor;}
  75% {box-shadow: 0px -.2em 0 0 currentcolor;}
  87% {box-shadow: .2em -.2em 0 0 currentcolor;}
}
@keyframes prixClipFix {
  0% {clip-path: polygon(50% 50%,0 0,0 0,0 0,0 0,0 0);}
  25% {clip-path: polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0);}
  50% {clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%);}
  75% {clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%);}
  100% {clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0);}
}
@keyframes pillerPushUp {
  0%, 40%, 100% {background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;}
  50%, 90% {background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px;}
}
@keyframes ballStepUp {
  0% {transform: translate(0, 0);}
  5% {transform: translate(8px, -14px);}
  10% {transform: translate(15px, -10px);}
  17% {transform: translate(23px, -24px);}
  20% {transform: translate(30px, -20px);}
  27% {transform: translate(38px, -34px);}
  30% {transform: translate(45px, -30px);}
  37% {transform: translate(53px, -44px);}
  40% {transform: translate(60px, -40px);}
  50% {transform: translate(60px, 0);}
  57% {transform: translate(53px, -14px);}
  60% {transform: translate(45px, -10px);}
  67% {transform: translate(37px, -24px);}
  70% {transform: translate(30px, -20px);}
  77% {transform: translate(22px, -34px);}
  80% {transform: translate(15px, -30px);}
  87% {transform: translate(7px, -44px);}
  90% {transform: translate(0, -40px);}
  100% {transform: translate(0, 0);}
}
@keyframes prog {
  to {width: 100%;}
}