Preloader with scss - sass

Question

I have this code. I really do not understand why it does not work.
I am using SCSS and compile it into CSS, but everything works, except of animation.
#keyframes spin {
form {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.preloader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(3, 25, 39);
z-index: 10;
.loader {
width: 70px;
height: 70px;
border: 10px solid $secondary-color;
border-radius: 50%;
border-top-color: $main-color;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: 5s spin infinite linear;
}
}

Answer 1

You have typo in your code.
Form should be from.
#keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.preloader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(3, 25, 39);
z-index: 10;
}
.loader {
width: 70px;
height: 70px;
border: 10px solid red;
border-radius: 50%;
border-top-color: black;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: 5s spin infinite linear;
}
<div class="preloader">
<div class="loader"></div>
</div>