Three Circle Object is not rotate 360degree - html

Question

Please see the code below.
.nk-loader-c {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nk-loader-circle {
transform-origin: bottom center;
animation: obj-rotate 3s linear infinite;
height: 36px;
}
.obj-circle {
display: inline-block;
background-color: #6540eb;
height: 20px;
width: 20px;
border-radius: 50%;
transform: scale(0);
animation: obj-grow 1.5s linear infinite;
margin: -5px;
}
.obj-circle:nth-child(1) {
background-color: #3766f3;
animation-delay: 1.5s;
}
.obj-circle:nth-child(2) {
background-color: #603aef;
animation-delay: .75s;
}
.obj-circle:nth-child(3) {
background-color: #2998f6;
animation-delay: .37s;
}
#keyframes obj-rotate {
to{
transform: rotate(360deg);
}
}
#keyframes obj-grow {
50% {
transform: scale(1);
}
}
<div class="nk-loader-c">
<div class="nk-loader-circle">
<div class="obj-circle"></div>
<div class="obj-circle"></div>
<div class="obj-circle"></div>
</div>
</div>
Can anyone help me with this? the rotation of the object circle is not
really 360degrees. Can anyone help me how can I make the rotation
360deg?
But when I tried using two circles the rotation if working on 360degress.

Answer 1

What about this?
.nk-loader-c {
padding-top: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nk-loader-circle {
position:absolute;
transform-origin: bottom center;
animation: obj-rotate 3s linear infinite;
height: 36px;
}
.obj-circle {
display: inline-block;
background-color: #6540eb;
height: 20px;
width: 20px;
border-radius: 50%;
transform: scale(0);
animation: obj-grow 1.5s linear infinite;
margin: -5px;
}
.nk-loader-circle:nth-child(1){
animation-delay: -0.5s;
}
.nk-loader-circle:nth-child(1) .obj-circle{
background-color: #3766f3;
animation-delay: 1.5s;
}
.nk-loader-circle:nth-child(2){
animation-delay: -.25s;
}
.nk-loader-circle:nth-child(2) .obj-circle{
background-color: #603aef;
animation-delay: .75s;
}
.nk-loader-circle:nth-child(3) {
animation-delay: 0s;
}
.nk-loader-circle:nth-child(3) .obj-circle{
background-color: #2998f6;
animation-delay: .37s;
}
#keyframes obj-rotate {
to {
transform: rotate(360deg);
}
}
#keyframes obj-grow {
50% {
transform: scale(1);
}
}
<div class="nk-loader-c">
<div class="nk-loader-circle">
<div class="obj-circle"></div>
</div>
<div class="nk-loader-circle">
<div class="obj-circle"></div>
</div>
<div class="nk-loader-circle">
<div class="obj-circle"></div>
</div>
</div>
</div>