Font Awesome Animated Spinner Through Background

font awesome animated spinner through background

Correct answer: Update CSS as given below.

    /* Styles go here */.loading-icon {  position: relative;  width: 20px;  height: 20px;   margin:50px auto;  -webkit-animation: fa-spin 2s infinite linear;  animation: fa-spin 2s infinite linear;}
.loading-icon:before {  content: "\f110";  font-family: FontAwesome;  font-size:20px;  position: absolute;  top: 0; }

<!DOCTYPE html><html>
<head>  <link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />  <link rel="stylesheet" href="style.css" /></head>
<body>  <div class="loading-icon"></div></body>
</html>

FontAwesome: How to transition from fa-spin to no spin

You can pause the animation with animation-play-state.

// css
.pause-spinner {
  animation-play-state: paused;
}

// js (jQuery)
$("i").addClass("pause-spinner");

Animate icon font spinner

Found a better solution. Put it together on jsfiddle

.spinner {
    position: relative;
    font-family:"nvicons";
    font-size: 24px;
    letter-spacing: -1em;
    color: #eee;
    text-rendering: optimizeSpeed;
}
.spinner > span {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: coloring 1s linear infinite;
}
.spinner .e1 {
    -webkit-animation-delay: 0.0s;
}
.spinner .e2 {
    -webkit-animation-delay: 0.08333s;
}
.spinner .e3 {
    -webkit-animation-delay: 0.16667s;
}
.spinner .e4 {
    -webkit-animation-delay: 0.25s;
}
.spinner .e5 {
    -webkit-animation-delay: 0.33333s;
}
.spinner .e6 {
    -webkit-animation-delay: 0.41667s;
}
.spinner .e7 {
    -webkit-animation-delay: 0.5s;
}
.spinner .e8 {
    -webkit-animation-delay: 0.58333s;
}
.spinner .e9 {
    -webkit-animation-delay: 0.66667s;
}
.spinner .e10 {
    -webkit-animation-delay: 0.75s;
}
.spinner .e11 {
    -webkit-animation-delay: 0.83333s;
}
.spinner .e12 {
    -webkit-animation-delay: 0.91667s;
}
@-webkit-keyframes coloring {
    from {
        color: #222;
    }
    to {
        color: #eee;
    }
}

How to use fonts-awesome loading image

You have to use complete css of font-awesome look here

Using CSS3 transforms/animations with font-face produces wobbly spinner gif-like

By default, CSS transforms things about their vertical and horizontal center with the property transform-origin. A short-hand syntax for this default value is 50% 50%, which represents the x and then y value of the origin.

For this icon, I found that shifting the y origin to 38% smooths it out a bit, but you'll need to play around with it to get the precise values. View on JSFiddle

i.icon-repeat {
  -webkit-transform-origin:50% 38%;
  -moz-transform-origin:50% 38%;
  -ms-transform-origin:50% 38%;
  -o-transform-origin:50% 38%;
  transform-origin: 50% 38%;
}

For more on the transform-origin property, I recommend the MDN article on the property.

Centering Font Awsome in the middle of the screen

Give it a padding of 50% and a margin of -8px (50% of its original size). The body must span over the whole window. To prevent strange behavior of the scroll bar (due to the animation attached to .fa-spin) use these styles on a container:

<div class="center-all">
  <i class="fa fa-spinner fa-spin"></i>
</div>

The css is as follows:

html, body {
  width: 100%;
  height: 100%;
}

.center-all {
  padding: 50%;
  margin: -8px;
  width: 16px;
  height: 16px;
}

See https://jsfiddle.net/82z3t8dL/3/

How to absolutly center an overlaid Font Awesome icon?

to achieve this and make the icon in the center we need to wrap the <i> tage inside another element another <div> for example, because if we try to center the <i> directly we will have some kind of conflict with the font-awsome animation , so we just need to center the div wraping the <i> tag:

HTML:

<div class="busy-indicator">
  <div>
      <i class="fa fa-spin fa-refresh"></i>
  </div>
</div>

CSS:

.busy-indicator > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

this will center the icon in the busy-indicator div

Font Awesome Animated Spinner Through Background