How center my spinner when it rotate - CSS Animation - html

Question

I created a spinner in css and I put it in center without animation it works but when I start animation my spinner move away. Specifically When I use "#keyframes spinner" rule.
How I can keep it in center position?
.spinner-animation{
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
#keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="spinner-animation">
<span class="spinner"></span>
<div class="content">Loading...</div>
</div>

Answer 1

I modified the animation and added a transform-origin to the spinner :D
.spinner-animation{
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform-origin: top left;
transform: translate(-50%,-50%);
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
#keyframes spinner {
0% {
transform: rotate(0deg) translate(-50%,-50%);
}
100% {
transform: rotate(360deg) translate(-50%,-50%);
}
}
<div class="spinner-animation">
<span class="spinner"></span>
<div class="content">Loading...</div>
</div>

Answer 2

Put the span in another container and apply position: absolute to this container
.spinner-animation {
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.holder {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.holder .spinner {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation>.content {
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
#keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="spinner-animation">
<div class="holder">
<span class="spinner"></span>
</div>
<div class="content">Loading...</div>
</div>

Answer 3

The transform in your animation is overwriting the translate() positioning, you need to add translate() to your animation transform property.
.spinner-animation{
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
#keyframes spinner {
0% {
transform: translate(-50%,-50%) rotate(0deg);
}
100% {
transform: translate(-50%,-50%) rotate(360deg);
}
}
<div class="spinner-animation">
<span class="spinner"></span>
<div class="content">Loading...</div>
</div>

Answer 4

Flex-box solution: Display the parent element as a flex element, and align (vertically) and justify (horizontally) its absolutely positioned children to the center.
.spinner-animation{
width: 500px;
height: 500px;
background: gray;
display: flex;
align-items: center;
justify-content: center;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
#keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="spinner-animation">
<span class="spinner"></span>
<div class="content">Loading...</div>
</div>