This a code snippet for loading screen.
I want to place text below the loader animation, example: Loading.
I am not able to place/order div correctly below the .loader1 div.
.loader {
position: absolute;
width: 100%;
height: 100%;
background: #222222;
z-index: 1000;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader">
<div class="loader1"></div>
</div>
That's it. Thanks in advance.
Like this?
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
color:white;
text-align:center;
width: 100%;
height: 100%;
background: #222222;
z-index: 1000;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position:fixed;
display:block;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader">
LOADING ...
<div class="loader1"> </div>
</div>
</body>
</html>
Added some CSS ro your loader div and placed it under the loader. Would this be what you're looking for?
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
color: #fff;
text-align: center;
width: 100px;
height: 20px;
line-height:20px;
padding: 5px 10px;
top: 200px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #222222;
z-index: 1000;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader">
<div class="loader1"></div>
Loading</div>
</body>
</html>
We will have to take some assumptions.
The width and height of circle is fixed as it is now. Then we use absolute position of div containing text Loading. Using margin-left, margin-top, left, top we can play and find what is suitable of us.
.loader {
position: absolute;
width: 100%;
height: 100%;
background: #222222;
z-index: 1000;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader-text{
position:absolute;
top:50%;
left:50%;
color:#fff;
margin-top:-15px;
margin-left:-30px;
}
<div class="loader">
<div class="loader1"></div>
<div class="loader-text">Loading</div>
</div>
Maybe u can do that like this:
Demo: CodePen
.loader {
position: absolute;
width: 100%;
height: 100%;
background: #222222;
z-index: 1000;
}
.loader1, .loading {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loading {
z-index: 1002;
width: 90px;
height: 20px;
color: #fff;
}
.loading p {
margin-top: 100px;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader">
<div class="loader1"></div>
<div class="loading"><p>LOADING...</p></div>
</div>
I would change how you're doing it entirely and use flexbox like this.
It will work out a middle based on both the spinner and the text as opposed to having the spinner in the middle and the text below it.
body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.load {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: rgba(34, 34, 34, 1);
z-index: 999;
}
.load-spinner {
border-radius: 50%;
border: 16px solid;
border-color: #DAC500 #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.load-text {
text-align: center;
font-variant: small-caps;
color: #fff;
font-weight: 700;
font-size: 18px;
padding-top: 10px;
}
#keyframes spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
<div class="load">
<div class="load-group">
<div class="load-spinner"></div>
<div class="load-text">Loading...</div>
</div>
</div>
Related
I have a simple loader animation and I want to add a loading text inside the circle.
As I'm spinning the .slide-loader and my text is inside it I've tried to exclude the .loader-text but it still spins?! how can I fix the loader-text inside the circle?
Here is the code:
.slide-loader:not(.loader-text) {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="slide-loader">
<div class="loader-text">Loading...</div>
</div>
try this code:
.slide-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="slide-loader">
<div class="spinner"></div>
<div class="loader-text">Loading...</div>
</div>
You can't..as such, if you rotate the parent you rotate the child. You need to rotate the text the other way at the same time.
Then center the text any way you wish, perhaps with flexbox....
.slide-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
display: flex;
justify-content: center;
align-items: center;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader-text {
animation: spin 2s linear infinite reverse;
}
<div class="slide-loader">
<div class="loader-text">Loading...</div>
</div>
Use an absolutely positioned pseudo-element (::before) for the rotating area, and center the text with a flexbox:
.slide-loader {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
.slide-loader::before {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
animation: spin 2s linear infinite;
content: '';
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="slide-loader">Loading...</div>
The spinner and text can be siblings and you can center both relative to the parent:
.slide-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
.spinner {
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
box-sizing: border-box;
position: absolute;
/*Center spinner with these 4 lines*/
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.loader-text {
position: absolute;
/*Center text with these 3 lines*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="slide-loader">
<div class="spinner"></div>
<div class="loader-text">Loading...</div>
</div>
.slide-loader:not(.loader-text) {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div>
<div class="container">
<div class="loader-text">Loading...</div>
<div class="slide-loader">
</div>
</div>
</div>
Hi I made this work around and works perfectly.
<div class="container">
<div class="slide-loader"></div>
<div class="loader-text">Loading...</div>
</div>
.slide-loader{
grid-row: 1/-1;
grid-column: 1/-1;
margin: auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.container{
width: 200px;
display: grid;
grid-template-rows: 1fr 20px 1fr;
grid-template-columns: auto 60px auto;
}
.loader-text{
grid-row: 2;
grid-column: 2;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
I want to make three circle spinners spinning around the text and the text inside these spinners will stay still.
I am only allowed to do this with CSS by referring to the .spinner-border in Bootstrap. The HTML file cannot be modified.
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
#-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
left: auto;
top: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>
I have tried to make one spinner first. But I don't know how to make the text stay still.
.loader-wrapper {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
}
#-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner-border {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
position: relative;
top: 5px;
left: auto;
width: 80px;
font-size: 20px;
text-align: center;
display: inline-block;
width: 10rem;
height: 10rem;
vertical-align: text-center;
}
.loader::after {
content: '';
position: absolute;
left: 0;
top: -10px;
width: 100%;
height: 100%;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
<div class="loader">Loading</div>
</div>
I wrote a pure css drawing circle animation, but there's a little white space between the two half circles during the animation. (When the animation ends, they gone.)
Can anyone please tell me why does this happened?
My HTML:
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 0;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 0;
animation: circleLeft 5s linear forwards;
}
#keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
#keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>
My complete code goes here. Thank you.
Here it is, please check. It was because of you gave .circle-left and .circle-right left:0; and right:0; respectively, change it to left:1px; and right:1px; and you're done...
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 1px;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 1px;
animation: circleLeft 5s linear forwards;
}
#keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
#keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>
This is my solution:
.circle__wrapper--right { right: 0; margin-right: 20px;}
.circle__wrapper--left { left: 0; margin-left: 20px; }
So, I found this loading screen on the internet and I made a bunch of tweaks to it but I am not sure how to shrink it. Here is my code:
CSS
body {
background-color: #90EE90;
}
#loading-wrapper {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#loading-text {
display: block;
position: absolute;
top: 100%;
left: 100%;
color: #999;
width: 100px;
height: 30px;
margin: -7px 0 0 -45px;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 20px;
}
#loading-content {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 170px;
height: 170px;
margin: -85px 0 0 -85px;
border: 3px solid #F00;
}
#loading-content:after {
content: "";
position: absolute;
border: 3px solid #0F0;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
#loading-content:before {
content: "";
position: absolute;
border: 3px solid #00F;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
}
#loading-content {
border: 3px solid transparent;
border-top-color: #20B2AA;
border-bottom-color: #20B2AA;
border-radius: 50%;
-webkit-animation: loader 3.5s linear infinite;
-moz-animation: loader 3.5s linear infinite;
-o-animation: loader 3.5s linear infinite;
animation: loader 3.5s linear infinite;
}
#loading-content:before {
border: 3px solid transparent;
border-top-color: #778899;
border-bottom-color: #778899;
border-radius: 50%;
-webkit-animation: loader 2.5s linear infinite;
-moz-animation: loader 2.5s linear infinite;
-o-animation: loader 2.5s linear infinite;
animation: loader 3s linear infinite;
}
#loading-content:after {
border: 3px solid transparent;
border-top-color: #84417C;
border-bottom-color: #84417C;
border-radius: 50%;
-webkit-animation: loader 1s linear infinite;
animation: loader 1s linear infinite;
-moz-animation: loader 1.5s linear infinite;
-o-animation: loader 1.5s linear infinite;
}
#-webkit-keyframes loaders {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes loader {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
Transform: rotate (0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#content-wrapper {
color: #FFF;
position: fixed;
left: 0;
top: 20px;
width: 100%;
height: 100%;
}
#header
{
width: 800px;
margin: 0 auto;
text-align: center;
height: 100px;
background-color: #666;
}
#content
{
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
background-color: #888;
}
HTML
<div id="loading-wrapper">
<div id="loading-text">LOADING</div>
<div id="loading-content"></div>
</div>
So, I am trying to get my loading screen to be smaller so it doesn't take up so much of the page please. Thanks in advance!
Change the width, height, and margin inside #loading-content proportionally:
#loading-content {
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
Demo Snippet:
body {
background-color: #90EE90;
}
#loading-wrapper {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#loading-text {
display: block;
position: absolute;
top: 100%;
left: 100%;
color: #999;
width: 100px;
height: 30px;
margin: -7px 0 0 -45px;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 20px;
}
#loading-content {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
border: 3px solid #F00;
}
#loading-content:after {
content: "";
position: absolute;
border: 3px solid #0F0;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
#loading-content:before {
content: "";
position: absolute;
border: 3px solid #00F;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
}
#loading-content {
border: 3px solid transparent;
border-top-color: #20B2AA;
border-bottom-color: #20B2AA;
border-radius: 50%;
-webkit-animation: loader 3.5s linear infinite;
-moz-animation: loader 3.5s linear infinite;
-o-animation: loader 3.5s linear infinite;
animation: loader 3.5s linear infinite;
}
#loading-content:before {
border: 3px solid transparent;
border-top-color: #778899;
border-bottom-color: #778899;
border-radius: 50%;
-webkit-animation: loader 2.5s linear infinite;
-moz-animation: loader 2.5s linear infinite;
-o-animation: loader 2.5s linear infinite;
animation: loader 3s linear infinite;
}
#loading-content:after {
border: 3px solid transparent;
border-top-color: #84417C;
border-bottom-color: #84417C;
border-radius: 50%;
-webkit-animation: loader 1s linear infinite;
animation: loader 1s linear infinite;
-moz-animation: loader 1.5s linear infinite;
-o-animation: loader 1.5s linear infinite;
}
#-webkit-keyframes loaders {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes loader {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
Transform: rotate (0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#content-wrapper {
color: #FFF;
position: fixed;
left: 0;
top: 20px;
width: 100%;
height: 100%;
}
#header
{
width: 800px;
margin: 0 auto;
text-align: center;
height: 100px;
background-color: #666;
}
#content
{
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
background-color: #888;
}
<div id="loading-wrapper">
<div id="loading-text">LOADING</div>
<div id="loading-content"></div>
</div>
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.
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>
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>