Inspired by Fontawesome, I'm trying to make a spinning icon with bootstrap3. It's easily achieve via CSS3 transition and transform. Problem is the icon does not not rotate around the center. It swings while rotating.
Code pasted below. Anyone know what causes the problem?
.spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<h1 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
</h1>
Glyphicons. Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible.
$("#lnkPopup"). prop("disabled", false); And if you want to dynamically disable it again, then just do: $("#lnkPopup").
Bootstrap provides set of graphic icons, symbols and fonts called Glyphicons. Some Glyphicons like Home icon, User icon, Lock icon, etc. Generally, Glyphicons are icon fonts which you can use in your web projects.
Bootstrap 4 does not have its own icon library (Glyphicons from Bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons.
The issue is that you rotate an element which is not centered in your span.
If you want a real solution, add transform-origin
on .spin
to change the center of rotation
.spin{
-webkit-transform-origin: 50% 58%;
transform-origin:50% 58%;
-ms-transform-origin:50% 58%; /* IE 9 */
-webkit-animation: spin .2s infinite linear;
-moz-animation: spin .2s infinite linear;
-o-animation: spin .2s infinite linear;
animation: spin .2s infinite linear;
}
http://jsfiddle.net/L4zTu/5/
I wrote a blog post about this. Simply reference the glyphicon with a custom class:
<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
The glyphicon-spin
class was constructed by studying the fa-spin
class in the FontAwesome stylesheet:
h4 {
font-size:18px;
font-weight:bold;
}
.fa-spin-custom, .glyphicon-spin {
-webkit-animation: spin 1000ms infinite linear;
animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<h4>FontAwesome</h4>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-refresh fa-spin-custom"></i>
<br />
<br />
<h4>Glyphicons</h4>
<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
An additional point, if following this example.
The keyframe definitions need to allow for the case where some properties will be un-vendor prefixed and others won't. For example, in Chrome 35 the current keyframe definitions won't work as keyframes isn't vendor prefixed, but transform still is.
Something like this should allow for all current/future cases:
@-moz-keyframes spin
{
from
{
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to
{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin
{
from
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin
{
from
{
-wekbit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Font Awesome has a nice convenient way of getting an icon to spin:
http://fortawesome.github.io/Font-Awesome/examples/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With