I have this loader:
.loader_ajax_small {
border: 2px solid #f3f3f3 !important;
border-radius: 50%;
border-top: 2px solid #2D2D2D !important;
width: 29px;
height: 29px;
-webkit-animation: spin_loader_ajax_small 2s linear infinite;
animation: spin_loader_ajax_small 2s linear infinite;
}
#-webkit-keyframes spin_loader_ajax_small {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin_loader_ajax_small {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
But I can't understand how I can center horizontally inside a div, for example:
As you can see is on the left but I want it centered, how can I do it?
Added margin: 0 auto; in .loader_ajax_small for center in parent div
.loader {
border: 1px solid #ccc;
padding: 20px;
}
.loader_ajax_small {
border: 2px solid #f3f3f3 !important;
border-radius: 50%;
border-top: 2px solid #2D2D2D !important;
width: 29px;
height: 29px;
margin: 0 auto;
-webkit-animation: spin_loader_ajax_small 2s linear infinite;
animation: spin_loader_ajax_small 2s linear infinite;
}
#-webkit-keyframes spin_loader_ajax_small {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin_loader_ajax_small {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader">
<div class="loader_ajax_small"></div>
</div>
or with display: flex;
.loader {
border: 1px solid #ccc;
padding: 20px;
display: flex;
justify-content: center;
}
.loader_ajax_small {
border: 2px solid #f3f3f3 !important;
border-radius: 50%;
border-top: 2px solid #2D2D2D !important;
width: 29px;
height: 29px;
-webkit-animation: spin_loader_ajax_small 2s linear infinite;
animation: spin_loader_ajax_small 2s linear infinite;
}
#-webkit-keyframes spin_loader_ajax_small {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin_loader_ajax_small {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader">
<div class="loader_ajax_small"></div>
</div>
set your loader margin to auto
something like this
margin:10px auto;
Add margin:0 auto; in .loader_ajax_small property.
.loader_ajax_small {
border: 2px solid #f3f3f3 !important;
border-radius: 50%;
border-top: 2px solid #2D2D2D !important;
width: 29px;
height: 29px;
margin:0 auto;
-webkit-animation: spin_loader_ajax_small 2s linear infinite;
animation: spin_loader_ajax_small 2s linear infinite;
}
#-webkit-keyframes spin_loader_ajax_small {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin_loader_ajax_small {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader_ajax_small"></div>
Related
I have this code in my project:
body {
background-color: #312a50;
font-family: Helvetica Neue;
color: white;
}
html,
body {
height: 100%;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.t1 {
width: 0;
height: 0;
margin: auto;
border-right: 50px solid transparent;
border-bottom: 86.6px solid blue;
border-left: 50px solid transparent;
}
#-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
<div class="main">
<div style="text-align: center;" class="wrapper">
<div class="t1 rotating"></div>
</div>
</div>
My triangle currently rotates fine, and at the right speed, but it isn't rotating at the centre point of the triangle. It seems to rotate from a point slightly off from the centre.
Also, how do I show only the border of the triangle and not the full solid blue?
Any help would be greatly appreciated!
Thank you!
You need to adjust the transform-origin to 50% 66%
body {
background-color: #312a50;
font-family: Helvetica Neue;
color: white;
}
html,
body {
height: 100%;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.t1 {
width: 0;
height: 0;
margin: auto;
border-right: 50px solid transparent;
border-bottom: 86.6px solid blue;
border-left: 50px solid transparent;
transform-origin: 50% 66%;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating {
animation: rotating 2s linear infinite;
}
<div class="main">
<div style="text-align: center;" class="wrapper">
<div class="t1 rotating"></div>
</div>
</div>
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 created a button but when I put the mouse on it, the hover effect collapse.
Can someone give me an advice/solution ?
/* spinner style */
.spinner {
position: relative;
width: 50px;
height: 50px;
}
.spinner:before,
.spinner:after {
content: "";
display: block;
position: absolute;
border-width: 1px;
border-style: solid;
border-radius: 50%;
}
.spinner-block {
border: 2px solid #ccc;
!important;
border-radius: 50px!important;
width: 91px;
height: 91px;
}
/* spinners styles */
#-webkit-keyframes rotate-animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes anti-rotate-animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#keyframes anti-rotate-animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.spinner.spinner-0:before {
display: none;
}
.spinner.spinner-0:after {
width: 15px;
height: 15px;
border-bottom-color: #cccccc;
border-right-color: #cccccc;
border-top-color: #cccccc;
border-left-color: #cccccc;
top: -14px;
left: 34px;
background-color: #cccccc;
}
/**vert**/
.spinner.spinner-2:before {
width: 65px;
height: 65px;
border-bottom-color: #00ff10;
border-right-color: #00ff10;
border-top-color: rgba(33, 33, 33, 0);
border-left-color: rgba(33, 33, 33, 0);
top: 9px;
left: 10px;
-webkit-animation: anti-rotate-animation 0s linear 0s infinite;
animation: anti-rotate-animation 0s linear 0s infinite;
}
/**jaune**/
.spinner.spinner-2:after {
width: 40px;
height: 40px;
border-bottom-color: #dafc29;
border-right-color: #dafc29;
border-top-color: rgba(33, 33, 33, 0);
border-left-color: rgba(33, 33, 33, 0);
top: 22px;
left: 22px;
-webkit-animation: rotate-animation 0s linear 0s infinite;
animation: rotate-animation 0s linear 0s infinite;
}
* {
box-sizing: border-box;
}
.spinners {
width: 92px;
height: 92px;
transition: transform .8s!important;
}
/**HOVER**/
/**vert**/
.spinner.spinner-2:hover::before {
kit-animation: anti-rotate-animation 2.85s linear 0s infinite;
animation: anti-rotate-animation 2.85s linear 0s infinite;
}
/**jaune**/
.spinner.spinner-2:hover::after {
-webkit-animation: rotate-animation 1s linear 0s infinite;
animation: rotate-animation 1s linear 0s infinite;
}
<a href="/our-clean-technology/">
<div class="spinners">
<div class="spinner-block">
<div class="spinner spinner-2"></div>
<div class="spinner spinner-0"></div>
</div>
</div>
</a>
change css like this
.spinners:hover .spinner-2::before {
kit-animation: anti-rotate-animation 2.85s linear 0s infinite;
animation: anti-rotate-animation 2.85s linear 0s infinite;
}
.spinners:hover .spinner-2::after {
-webkit-animation: rotate-animation 1s linear 0s infinite;
animation: rotate-animation 1s linear 0s infinite;
}
updated pen is here
I need a spinner that I can basically insert into the middle of paragraph text. I have the spinner the way I want it as a block-display element (div), but when I try to create it as a span (or change the div to be inline), the spinner doesn't work.
How can I modify this spinner so that it can be dropped into the middle of a sentence (i.e., paragraph text)?
#loader {
float: left;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loaderInline {
display: inline;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-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);
}
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0px;
opacity: 1
}
}
#keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
<p>
<div id="loader"></div>Works as normal DIV
</p>
<p>
<div id="loaderInline"></div>Broken as DIV with inline display
</p>
inline element cannot be sized , inline-block, inline-flex or inline-table does and interact as an inline box.
#loader {
float: left;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loaderInline {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-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);
}
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0px;
opacity: 1
}
}
#keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
<p>
<div id="loader"></div>Works as normal DIV
</p>
<p>
<div id="loaderInline"></div>Broken as DIV with inline display
</p>
You may as well use a pseudo :before/::before and inline-block:
#loader {
float: left;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
p:before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: 2px;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
-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);
}
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0px;
opacity: 1
}
}
#keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
<p>
an inline-block pseudo works too;
</p>
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>