.loader {
  position: relative;
  display: inline-block;
  height: 160px;
  width: 160px;
}
.loader .loader-flag {
  top: 58px;
  left: 52px;
  position: relative;
  height: 52px;
  width: 52px;
}
.loader .loader-flag-stroke {
  animation: loaderStroke 3.5s infinite;
}
.loader .loader-flag-fill {
  display: block;
  position: absolute;
  top: 1px;
  opacity: 1;
  animation: loaderFill 3.5s infinite;
}
.loader .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 .loader-flag-fill,
.loader .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);
  }
}