Create a Spinner with Css

Posted By : Gaurav Arora | 31-Mar-2016

Create A Spinner With CSS

Hi, As you already know that whenever we have to show some loading kind of content we add a spinner image to that part. And for that spinner we use a .gif image. But, we can make the same spinner with css only by using the code below: The HTML for the same spinner will go like this.


 
 

And after that we include the css that is used for creating that spinner.

.spinner{width: 100px;
    height: 100px;
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    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); }
}    

But make sure that you have included all the browser specific prefixes for CSS3 properties that we have used above. Like -webkit for chrome, safari, -moz for mozilla, -ms for Internet Explorer and -O for opera might be there are some other also. In this way you can create a spinner without using an image.

 

THANKS

About Author

Author Image
Gaurav Arora

Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.

Request for Proposal

Name is required

Comment is required

Sending message..