.loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(254, 254, 254, 0.8); }
  @supports (backdrop-filter: blur(2px)) {
    .loader {
      background-color: rgba(254, 254, 254, 0.5); } }

.outer {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: u5f57f510 1s infinite ease-in-out;
  animation-delay: -.25s; }

@keyframes u5f57f510 {
  from,
  to {
    transform: translate(-50%, -50%) scale(2.5); }
  50% {
    transform: translate(-50%, -50%) scale(1.5); } }
  .outer.primary {
    background-color: rgba(60, 175, 218, 0.15); }
  .outer.success {
    background-color: rgba(85, 197, 143, 0.15); }
  .outer.danger {
    background-color: rgba(221, 59, 76, 0.15); }
  .outer.warning {
    background-color: rgba(243, 188, 39, 0.15); }

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: u431571b5 1s infinite ease-in-out;
  animation-delay: -.333s; }

@keyframes u431571b5 {
  from,
  to {
    transform: translate(-50%, -50%) scale(1.75); }
  50% {
    transform: translate(-50%, -50%) scale(1.25); } }
  .middle.primary {
    background-color: rgba(60, 175, 218, 0.25); }
  .middle.success {
    background-color: rgba(85, 197, 143, 0.25); }
  .middle.danger {
    background-color: rgba(221, 59, 76, 0.25); }
  .middle.warning {
    background-color: rgba(243, 188, 39, 0.25); }

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: u30bd82b3 1s infinite ease-in-out; }

@keyframes u30bd82b3 {
  from,
  to {
    transform: translate(-50%, -50%) scale(1); }
  50% {
    transform: translate(-50%, -50%) scale(0.75); } }
  .inner.primary {
    background-color: #3cafda; }
  .inner.success {
    background-color: #55c58f; }
  .inner.danger {
    background-color: #dd3b4c; }
  .inner.warning {
    background-color: #f3bc27; }