body {
  min-height: 32em;
  background: gainsboro;
}

.loader {
  margin: 5em auto;
}
.loader--audioWave {
  width: 3em;
  height: 2em;
  background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
  background-repeat: no-repeat;
  background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
  animation: audioWave 1.5s linear infinite;
}
@keyframes audioWave {
  25% {
    background: linear-gradient(#3498db, #3498db) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
    background-repeat: no-repeat;
    background-size: 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
  }
  37.5% {
    background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#3498db, #3498db) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
    background-repeat: no-repeat;
    background-size: 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
  }
  50% {
    background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#3498db, #3498db) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
    background-repeat: no-repeat;
    background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em;
  }
  62.5% {
    background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#3498db, #3498db) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
    background-repeat: no-repeat;
    background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em;
  }
  75% {
    background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#3498db, #3498db) 2.5em 50%;
    background-repeat: no-repeat;
    background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em;
  }
}
.loader--snake {
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  transform: translate(-4.125em);
  box-shadow: 1.375em 0em #dec023, 1.375em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.29721em #b8b74c, 2.75em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.18368em #93ae75, 4.125em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.18368em #6da59e, 5.5em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.29721em #479cc7, 6.875em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
  animation: snake 2s linear infinite;
}
@keyframes snake {
  0% {
    box-shadow: 1.375em 0em #dec023, 1.375em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.29721em #b8b74c, 2.75em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.18368em #93ae75, 4.125em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.18368em #6da59e, 5.5em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.29721em #479cc7, 6.875em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
  }
  20% {
    box-shadow: 1.375em 0.29721em #b8b74c, 1.375em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.18368em #93ae75, 2.75em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em -0.18368em #6da59e, 4.125em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.29721em #479cc7, 5.5em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em 0em #dec023, 6.875em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
  }
  40% {
    box-shadow: 1.375em 0.18368em #93ae75, 1.375em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em -0.18368em #6da59e, 2.75em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em -0.29721em #479cc7, 4.125em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em 0em #dec023, 5.5em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em 0.29721em #b8b74c, 6.875em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
  }
  60% {
    box-shadow: 1.375em -0.18368em #6da59e, 1.375em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em -0.29721em #479cc7, 2.75em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0em #dec023, 4.125em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em 0.29721em #b8b74c, 5.5em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em 0.18368em #93ae75, 6.875em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
  }
  80% {
    box-shadow: 1.375em -0.29721em #479cc7, 1.375em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0em #dec023, 2.75em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.29721em #b8b74c, 4.125em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em 0.18368em #93ae75, 5.5em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.18368em #6da59e, 6.875em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
  }
  100% {
    box-shadow: 1.375em 0em #dec023, 1.375em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.29721em #b8b74c, 2.75em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.18368em #93ae75, 4.125em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.18368em #6da59e, 5.5em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.29721em #479cc7, 6.875em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
  }
}
.loader--spinningDisc {
  border: solid 0.5em #9b59b6;
  border-right-color: transparent;
  border-left-color: transparent;
  padding: 0.5em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #3498db;
  background-clip: content-box;
  animation: spinDisc 1.5s linear infinite;
}
@keyframes spinDisc {
  50% {
    border-top-color: #3498db;
    border-bottom-color: #3498db;
    background-color: #2ecc71;
  }
  100% {
    transform: rotate(1turn);
  }
}
.loader--glisteningWindow {
  width: 0.25em;
  height: 0.25em;
  box-shadow: 0.70711em 0.70711em 0 0em #2ecc71, -0.70711em 0.70711em 0 0.17678em #9b59b6, -0.70711em -0.70711em 0 0.25em #3498db, 0.70711em -0.70711em 0 0.17678em #f1c40f;
  animation: gw 1s ease-in-out infinite, rot 2.8s linear infinite;
}
@keyframes rot {
  to {
    transform: rotate(360deg);
  }
}
@keyframes gw {
  0% {
    box-shadow: 0.70711em 0.70711em 0 0.125em #2ecc71, -0.70711em 0.70711em 0 0.39017em #9b59b6, -0.70711em -0.70711em 0 0.5em #3498db, 0.70711em -0.70711em 0 0.39017em #f1c40f;
  }
  25% {
    box-shadow: 0.70711em 0.70711em 0 0.39017em #2ecc71, -0.70711em 0.70711em 0 0.5em #9b59b6, -0.70711em -0.70711em 0 0.39017em #3498db, 0.70711em -0.70711em 0 0.125em #f1c40f;
  }
  50% {
    box-shadow: 0.70711em 0.70711em 0 0.5em #2ecc71, -0.70711em 0.70711em 0 0.39017em #9b59b6, -0.70711em -0.70711em 0 0.125em #3498db, 0.70711em -0.70711em 0 0.39017em #f1c40f;
  }
  75% {
    box-shadow: 0.70711em 0.70711em 0 0.39017em #2ecc71, -0.70711em 0.70711em 0 0.125em #9b59b6, -0.70711em -0.70711em 0 0.39017em #3498db, 0.70711em -0.70711em 0 0.5em #f1c40f;
  }
  100% {
    box-shadow: 0.70711em 0.70711em 0 0.125em #2ecc71, -0.70711em 0.70711em 0 0.39017em #9b59b6, -0.70711em -0.70711em 0 0.5em #3498db, 0.70711em -0.70711em 0 0.39017em #f1c40f;
  }
}
.loader--circularSquare {
  width: 0;
  height: 0;
  box-shadow: -0.625em -0.625em 0 0.625em #9b59b6, 0.625em -0.625em 0 0.625em #9b59b6, -0.625em 0.625em 0 0.625em #9b59b6, 0.625em 0.625em 0 0.625em #9b59b6;
  animation: circSquare 1.5s ease-in-out infinite;
}
@keyframes circSquare {
  50% {
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    transform: rotate(0.5turn);
    box-shadow: -2.5em 0 0 #2ecc71, 2.5em 0 0 #e74c3c, -2.5em 0 0 #3498db, 2.5em 0 0 #f1c40f;
  }
  80%, 100% {
    transform: rotate(1turn);
  }
}

/* Custom Pulsing Loader */
.pl-spinner-pulse {
    display: inline-block;
    width: 48px;
    height: 48px;
    vertical-align: middle;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cg%3E%3Ccircle stroke-width='4' stroke='%23279b37' fill='none' r='0' cy='50' cx='50'%3E%3Canimate begin='0s' calcMode='spline' keySplines='0 0.2 0.8 1' keyTimes='0;1' values='0;40' dur='1s' repeatCount='indefinite' attributeName='r'%3E%3C/animate%3E%3Canimate begin='0s' calcMode='spline' keySplines='0.2 0 0.8 1' keyTimes='0;1' values='1;0' dur='1s' repeatCount='indefinite' attributeName='opacity'%3E%3C/animate%3E%3C/circle%3E%3Ccircle stroke-width='4' stroke='%23279b37' fill='none' r='0' cy='50' cx='50'%3E%3Canimate begin='-0.5s' calcMode='spline' keySplines='0 0.2 0.8 1' keyTimes='0;1' values='0;40' dur='1s' repeatCount='indefinite' attributeName='r'%3E%3C/animate%3E%3Canimate begin='-0.5s' calcMode='spline' keySplines='0.2 0 0.8 1' keyTimes='0;1' values='1;0' dur='1s' repeatCount='indefinite' attributeName='opacity'%3E%3C/animate%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.pl-spinner-comet {
    display: inline-block;
    width: 48px;
    height: 48px;
    vertical-align: middle;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 50 50;360 50 50' dur='1s' repeatCount='indefinite'/%3E%3Cpath d='M91 74.1C75.6 98 40.7 102.4 21.2 81c11 9.9 26.8 13.5 40.8 8.7 7.4-2.5 13.9-7.2 18.7-13.3 1.8-2.3 3.5-7.6 6.7-8 1.1 0 3.3 3.6 1.6 6.2z' fill='%23e15b64'/%3E%3Cpath d='M50.7 5c-4 0.2-4.9 5.9-1.1 7.3 1.8 0.6 4.1 0.1 5.9 0.3 2.1 0.1 4.3 0.5 6.4 0.9 5.8 1.4 11.3 4 16 7.8 10.8 10.1 16.2 26 13 41 4.2-13.1 1.6-27.5-6.4-38.7-3.4-4.7-7.8-8.7-12.7-11.7C66.6 7.8 58.2 4.6 50.7 5z' fill='%23f8b26a'/%3E%3Cpath d='M30.9 13.4C12 22.7 2.1 44.2 7.6 64.8c0.8 3.2 3.8 14.9 9.3 10.5 2.4-2 1.1-4.4-0.2-6.6-1.7-3-3.1-6.2-4-9.5-2.1-8.2-1.6-17.3 1.7-25.2 4.7-11.5 14.1-19.7 25.8-23.8-2.8-1.4-5.9-0.5-8.9 1z' fill='%23abbd81'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Spinner Bars (Green) */
.pl-spinner-bars {
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: middle;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg%3E%3Cg transform='rotate(0 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='-0.916s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(30 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='-0.833s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(60 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='-0.75s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(90 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='-0.666s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(120 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='-0.583s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(150 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='-0.5s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='-0.416s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(210 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='-0.333s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(240 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='-0.25s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(270 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='-0.166s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(300 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='-0.083s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(330 50 50)'%3E%3Crect fill='%235aae1e' height='12' width='6' ry='6' rx='3' y='24' x='47'%3E%3Canimate repeatCount='indefinite' begin='0s' dur='1s' keyTimes='0;1' values='1;0' attributeName='opacity'/%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}