CODEWITHSUNDEEP
htmlcssspinnerfont-awesome
netanalyzer
netanalyzer

Reputation: 634

How to make a font-awesome spinner go around a circular picture

I have a circular image placed in a div tag. Now I want to place a font-awesome spinner over this image.

The effect I'm looking for is to make spinning image border, for example with this spinner icon.

The spinner and image must have the same radius.

The solution can be made without a font-awesome spinner, but with pure CSS3.

Upvotes: 0

Views: 1877

Answers (2)

Michael Laszlo
Michael Laszlo

Reputation: 12239

Font Awesome can do the work for you, but if you wish to make any HTML element rotate endlessly, you can use the @keyframes rule—supplemented by @-webkit-keyframes for Safari support—to define the rotating behavior. Use the animation property to apply this behavior to an HTML element.

The snippet below defines the rotating animation and applies it to .circle. The .circle element and the image are placed with position: absolute so that the circle goes around the image.

@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.circle {
  animation: rotating 2.5s linear infinite;
  position: absolute;
  left: -15px;
  top: -15px;
}

#demo {
  padding: 40px;
  color: #222;
  margin: 40px;
  position: relative;
  font-size: 130px;
}

#demo img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div id="demo">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_Fe2cRDzAEE4mE5DDxYsbx9Emt2aQYVs-kmsDnOc8PeHOSlYV" />
  <div class="circle fa fa-circle-o-notch"></div>
</div>

Upvotes: 4

byrass
byrass

Reputation: 360

Use:

<i class="fa fa-spinner fa-circle-o-notch"><img href="your-image" id="image"></img></i>

And add this to your css:

#image {
    display: inline;
}

Look at the examples And display docs.

Upvotes: 4

Related Questions