Center align rotating SVG in Loader CSS - html

Question

I am trying to animate a SVG from 0deg to 360deg. But if i use the transform: rotate property then the svg loses its position and its not centre aligned when the browser resizes. I used transform-origin to 50%. But the svg loses its position.
HTML :
<div id="hexagon-spinner">
<Hexagon className="hexagon-loader" viewBox="0 0 65.103 75.174" />
</div>
#hexagon-spinner {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 9999;
}
.hexagon-loader {
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: -50% 50%;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

Answer 1

First of all, when it is 100%, you should define 360 degrees, not 359 degrees.
100% {
transform: rotate(359deg); // ->> 360deg
}
What to do about the average,
#keyframes spin {
0% {
transform: rotate(0deg);
transform-origin: -50% 50%;
}
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
Finally,
If we need to shorten the code (since it will start with 0deg by default), if we enter only the parameter 100%, there will be no problem.
#keyframes spin {
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
Simple Code Snippet
#keyframes spin {
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
div {
position: absolute;
top: 50%;
left: 50%;
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: -50% 50%;
}
<div>LOADING</div>
#hexagon-spinner {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 9999;
display: flex;
align-items:center;
justify-content: center;
}
.hexagon-loader {
background-color: purple;
height: 40px;
width: 40px;
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
display: inline-block;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div id="hexagon-spinner">
<div class="hexagon-loader"></div>
</div>
When we shift the element with the translate (to center it) we naturally distort its center. Therefore it will not work properly.
I suggest a solution for this. (flexbox) is to use. You will see an example below.
Note: (Don't forget to remove Absolute and Transform Origin features)