Perfect infinite rotation for ֍ character - css

Question

Im trying to use this character
֍
in place of a loading spinner.
Here's what I've got so far:
.spinner::after {
animation: rotating 2s linear infinite;
content: "֍";
font-size: 60px;
display: inline-block;
font-weight: normal;
transform-origin: 50% 50%;
}
#keyframes rotating {
0% {
transform: rotate(0deg) scale(1);
color: rgba(0, 0, 0, .5);
}
50% {
transform: rotate(180deg) scale(.8);
color: rgba(0, 0, 0, .85);
}
100% {
transform: rotate(360deg);
color: rgba(0, 0, 0, .5);
}
}
<i class="spinner"></i>
Even though this works, it is not perfect because the rotation does currently not happen around the perfect center of the character despite
transform-origin: 50% 50%;
making it look less than stellar.
Any ideas how to fix this?

Answer 1

I would use a fixed height equal to the font-size then play with line-height until I get it right. Also no need to set transform-origin since by default it's set to center
.spinner::after {
content: "֍";
font-size: 60px;
font-weight: normal;
line-height: 0.8;
display: inline-block;
height: 60px;
animation: rotating 2s linear infinite;
}
#keyframes rotating {
0% {
transform: rotate(0deg) scale(1);
color: rgba(0, 0, 0, .5);
}
50% {
transform: rotate(180deg) scale(.8);
color: rgba(0, 0, 0, .85);
}
100% {
transform: rotate(360deg);
color: rgba(0, 0, 0, .5);
}
}
<i class="spinner"></i>

Answer 2

it happens because a character height and width are not equal...
I tried to increase the height until It does what you want..
and here is the result:
.spinner::after {
animation: rotating 2s linear infinite;
content: "֍";
height: 80px;
font-size: 60px;
display: inline-block;
font-weight: normal;
}
#keyframes rotating {
0% {
transform: rotate(0deg) scale(1);
color: rgba(0, 0, 0, .5);
}
50% {
transform: rotate(180deg) scale(.8);
color: rgba(0, 0, 0, .85);
}
100% {
transform: rotate(360deg);
color: rgba(0, 0, 0, .5);
}
}
<i class="spinner"></i>

Answer 3

Three Properties
line-height: 3;
transform-origin: 50% 54%;
text-align: center;
Demo
.spinner::after {
animation: spin 2s infinite linear;
content: "֍";
font-size: 5em;
display: inline-block;
font-weight: normal;
/* Required */
line-height: 3;
/* Required */
transform-origin: 50% 54%;
/* Required */
text-align: center;
/* Optional for Position */
position: relative;
width: 3em;
top: 0;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
color: rgba(0, 0, 0, .5);
}
50% {
transform: rotate(180deg) scale(.8);
color: rgba(0, 0, 0, .85);
}
100% {
transform: rotate(360deg);
color: rgba(0, 0, 0, .5);
}
}
<i class="spinner"></i>

Answer 4

You will not get perfect center while rotating rectangle shape but you will get perfect center if its square shape
see demo below
div {
display: inline-block;
width: 100px;
height: 100px;
background-color: brown;
text-align: center;
position: relative;
margin: 10px;
float: left;
}
.spinner0::after {
animation: rotating 2s linear infinite;
content: "֍";
height: 80px;
font-size: 60px;
display: inline-block;
font-weight: normal;
}
#keyframes rotating {
0% {
transform: rotate(0deg) scale(1);
color: rgba(0, 0, 0, .5);
}
50% {
transform: rotate(180deg) scale(.8);
color: rgba(0, 0, 0, .85);
}
100% {
transform: rotate(360deg);
color: rgba(0, 0, 0, .5);
}
}
div > i:before {
content: '';
width: 5px;
height: 5px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.spinner1::after{
animation: rotating 5s linear infinite;
content: "֍";
font-size: 60px;
line-height: 60px;
display: inline-block;
font-weight: normal;
position: absolute;
left: 50%;
top: 50%;
margin-top: -30px;
margin-left: -22px;
}
.spinner2::after {
animation: rotating 5s linear infinite;
content: "֍";
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
font-size: 60px;
transform: rotate(90deg);
margin-left: 2px;
}
.spinner3::after {
animation: rotating 5s linear infinite;
content: "";
height: 30px;
width: 30px;
font-size: 60px;
line-height: 1;
display: inline-block;
font-weight: normal;
border: 1px solid #000;
position: absolute;
left: 50%;
top: 50%;
margin-top: -15px;
margin-left: -15px;
}
<div>
<i class="spinner1"></i>
</div>
<div>
<i class="spinner2"></i>
</div>
<div>
<i class="spinner3"></i>
</div>
if you still want to rotate rectangular shape/icon then along with rotation you have to adjust its position a bit
hope you got my point here