Css анимация на внешнем файле не работает. а нормальный стиль работы?

Question

Я хочу сделать предварительный просмотр изображения на моей странице регистрации. и я использую, чтобы использовать мой внешний css под названием index.css. раньше это нормально для моего ввода, кнопки и прочего. А также для стиля предварительного просмотра изображения, его работы. Я также использую w3School css. но какая-то причина. он не работает для анимации (только для внешних css).
здесь мой html код

">

здесь мой css код

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}/* its normal css style that work */
/* loader not work in external css */
.loader {
  border: 8px solid #a3a199;
  border-radius: 50%;
  border-top: 8px solid black;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

и здесь js для моего предварительного просмотра img

function previewImage() {
    document.getElementById("fotoView").style.display = "none";
    var loader = document.getElementById("loaderImg");
    loader.style.display = 'block';
    var oFReader = new FileReader();
     oFReader.readAsDataURL(document.getElementById("foto").files[0]);

    oFReader.onload = function(oFREvent) {
      document.getElementById("fotoView").src = oFREvent.target.result;
      loader.style.display = 'none';
      document.getElementById("fotoView").style.display = "block";
    };
  };

спасибо