Animation Not Running - css

Question

I am trying to make a loading screen using CSS Animations. The screen is 4 different bars shrinking and growing. I want to arrange them in this formation where they form a square. I use absolute positioning to position them, but I would like to know if there is a better way. I managed to do 3 bars with display and float but did not manage to do the last one.
Now, the animations are not running at all. Can somebody help me?
Code:
https://codepen.io/ngmh/pen/gxewJK
HTML:
<div id="top"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="left"></div>
CSS:
#top{
background-color: red;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
left: 37.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#bottom{
background-color: yellow;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
top: 112.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#left{
background-color: blue;
width: 25px;
height: 100px;
border-radius: 12.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#right{
background-color: green;
width: 25px;
height: 100px;
border-radius: 12.5px;
position: absolute;
left: 112.5px;
top: 37.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes loading-1{
0%:{width: 100px;}
50%:{width: 10px;}
100%:{width: 100px;}
}
#keyframes loading-2{
0%:{height: 100px;}
50%:{height: 10px;}
100%:{height: 100px;}
}

Answer 1

There shouldn't be any colon : after the percent sign % in your #keyframes rules
#top{
background-color: red;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
left: 37.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#bottom{
background-color: yellow;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
top: 112.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#left{
background-color: blue;
width: 25px;
height: 100px;
border-radius: 12.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#right{
background-color: green;
width: 25px;
height: 100px;
border-radius: 12.5px;
position: absolute;
left: 112.5px;
top: 37.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes loading-1{
0% {width: 100px;}
50% {width: 10px;}
100% {width: 100px;}
}
#keyframes loading-2{
0% {height: 100px;}
50% {height: 10px;}
100% {height: 100px;}
}
<div id="top"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="left"></div>
Using pseudo elements would make the markup smaller and with that maybe more maintainable.
The outer does not use absolute positioning and will flow better with the rest of the content.
.outer {
position: relative;
}
.outer div,
.outer::before,
.outer::after,
.outer div::before,
.outer div::after {
content: '';
position: absolute;
border-radius: 12.5px;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.outer::before {
background-color: red;
width: 100px;
height: 25px;
left: 37.5px;
animation-name: loading-1;
}
.outer::after{
background-color: yellow;
width: 100px;
height: 25px;
top: 112.5px;
animation-name: loading-1;
}
.outer div::before{
background-color: blue;
width: 25px;
height: 100px;
animation-name: loading-2;
}
.outer div::after{
background-color: green;
width: 25px;
height: 100px;
left: 112.5px;
top: 37.5px;
animation-name: loading-2;
}
#keyframes loading-1{
0% {width: 100px;}
50% {width: 10px;}
100% {width: 100px;}
}
#keyframes loading-2{
0% {height: 100px;}
50% {height: 10px;}
100% {height: 100px;}
}
<div class="outer"><div></div></div>