Why does my css rotate animation not work?

Please have a look at this plunker:

https://plnkr.co/edit/hLd4TgrPjuMCXBqN?open=lib%2Fscript.js

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body onload="init()">

<div style="position: relative;">
    <input type="text" />
    <button onclick="buttonClick()">click me</button>
    
    <div class="loader-overlay-container">
        <div class="spinner">
        </div>
        <h3>Loading...</h3>
    </div>
</div>

  </body>
</html>

.loader-overlay-container {
  width: 100vw;
  height: 100vh;
  background-color: rgb(255, 255, 255, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.spinner {
    border-bottom: 3px solid grey;
    border-top: 3px solid grey;
    width: 50px;
    height: 50px;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    @keyframes spin { 
      from { 
          transform: rotate(0deg); 
      }
      to { 
          transform: rotate(360deg); 
      }
    }
}

input {
    width: 200px;
}

function buttonClick() {
    var input = document.querySelector('input');
    alert(input.value);
}

I am trying to create a loading overlay that sits on top of the contents of my page (for when the page needs to load some data). The overlay is basically a fixed div that covers the whole screen and is half transparent. In the center, there is a spinner with "Loading..." underneath it. I am trying to get the spinner to rotate with some css animation. It is not working. Can anyone see the problem?

Solution

The error in the CSS code is that the keyframes rule must never be nested in CSS 3. It should be declared outside the spinner styling. See the corrected code snippet below!

function buttonClick() {
  var input = document.querySelector('input');
  alert(input.value);
}

.loader-overlay-container {
  width: 100vw;
  height: 100vh;
  background-color: rgb(255, 255, 255, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.spinner {
  border-bottom: 3px solid grey;
  border-top: 3px solid grey;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

input {
  width: 200px;
}

<!doctype html>

<html>

<head>
  <link rel="stylesheet" href="lib/style.css">
  <script src="lib/script.js"></script>
</head>

<body onload="init()">

  <div style="position: relative;">
    <input type="text" />
    <button onclick="buttonClick()">click me</button>

    <div class="loader-overlay-container">
      <div class="spinner">
      </div>
      <h3>Loading...</h3>
    </div>
  </div>

</body>

</html>