Stop rotation of text in loader div - html

Question

I found loader CSS trick, and I want to put text or image into loader without rotation.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
animation: no-spin .5s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
I tried #keyframes no-spin for reverse rotation, but didn't work.

Answer 1

You'll want to add display:block on the <span>. A transform on display:inline will not work (as specified in the spec). In practice this boils down to using display:block or display:inline-block.
I've also modified the animation time of .no-spin to 1s, to match your spin animation speed.
This will give the illusion of not spinning, in actuality it's spinning with the same speed in the opposite direction.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
display: block;
animation: no-spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>

Answer 2

Use the spin on a pseudo element
.loader {
position: relative;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 10px auto;
font-size: 12px;
}
.loader::after {
content: '';
position: absolute;
top: 0; left: 0;
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
animation: spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>