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
More From Oodles
Ready to innovate? Let's get in touch
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.