CSS
body, html {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #232526;
background: linear-gradient(to left, #232526 , #414345);
}
.square {
display: inline-block;
width: 150px;
height: 150px;
position: relative;
border: 4px solid #ECECEC;
animation: rotate 3s infinite ease;
}
.fill {
vertical-align: top;
display: inline-block;
width: 100%;
background: #c2e59c;
background: linear-gradient(to left, #c2e59c , #64b3f4);
animation: fill 3s infinite ease-out;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
25% { transform: rotate(180deg); }
50% { transform: rotate(180deg); }
75% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes fill {
0% { height: 100%; }
25% { height: 100%; }
50% { height: 0%; }
75% { height: 0%; }
100% { height: 100%; }
}
