.loader {
  transform: rotate(80deg);
  max-width: 30px;
  max-height: 30px;
}

.loader .stripe {
  display: inline-block;
  width: 3px;
  height: 14px;
  outline: 1px solid transparent;
  animation: loader 1.2s ease-in-out infinite;
}

.loader .stripe:nth-child(1) {
  background-color: #4285f4;
  animation-delay: 0.15s;
  margin-bottom: -5px;
}

.loader .stripe:nth-child(2) {
  background-color: #db4437;
  animation-delay: 0.3s;
  margin-bottom: 5px;
}
.loader .stripe:nth-child(3) {
  background-color: #f4b400;
  animation-delay: 0.45s;
  margin-bottom: -7px;
}
.loader .stripe:nth-child(4) {
  background-color: #0f9d58;
  animation-delay: 0.6s;
  margin-bottom: 7px;
}

@keyframes loader {
  20% {
    transform: scale(1, 2.2);
  }
  40% {
    transform: scale(1);
  }
}