.loader {
  position: relative;
  display: inline-block;
  height: 160px;
  width: 160px;

  .loader-flag {
    top: 58px;
    left: 52px;
    position: relative;
    height: 52px;
    width: 52px;
  }

  .loader-flag-stroke {
    animation: loaderStroke 3.5s infinite;
  }

  .loader-flag-fill {
    display: block;
    position: absolute;
    top: 1px;
    opacity: 1;
    animation: loaderFill 3.5s infinite;
  }

  .loader-spinner {
    width: 160px;
    height: 160px;
    position: absolute;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjU0IC01NCAxNjAgMTYwIj48bGluZWFyR3JhZGllbnQgaWQ9ImEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTA4LjY2MiIgeTE9IjUyLjE3NSIgeDI9IjEwNy42NjIiIHkyPSI1Mi4xNzUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMTYwIDAgMCAtODAgLTE3MTcyIDQxNjApIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwMDk3YzciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDk3YzciIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTIxNCAyNmMwLTQ0LjItMzUuOC04MC04MC04MFM1NC0xOC4yIDU0IDI2aDJjMC00My4xIDM0LjktNzggNzgtNzhzNzggMzQuOSA3OCA3OGgyeiIvPjwvc3ZnPg==");
    animation: rotating 1.4s linear infinite;
  }

  .loader-flag-fill,
  .loader-flag-outline {
    width: 52px;
    height: 52px;
  }
}

/* Animations */
@keyframes loaderStroke {
  30% {
    stroke-dashoffset: 300;
    opacity: 0;
  }

  40% {
    stroke-dashoffset: 300;
    opacity: 1;
  }

  70% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes loaderFill {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 0;
  }

  70% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
