Loading icon in CSS without using image

Previously, I posted about how to make an animated loading icon in CSS3 for AJAX purposes here. Today, I’m going to show how you could make a loading icon without using any image at all.

Below is a sample (it is not rotating since I cannot add animation in this blog).

To create the above graphics, create a <div> tag and style it as below (don’t add anything inside the div, just style it):

#loading-icon {
  height: 28px;
  width: 28px;
  outline: none;
  margin: 0;
  padding: 0;
  border: 10px solid #000;
  border-radius: 50%;
  border-right-color: transparent;
  animation: rotate 1s linear infinite;
}

And add these at the very start of the stylesheet:

@keyframes rotate {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

And you’re done. If the animations don’t work, try adding vendor prefixes before every CSS property. -webkit- for Chrome, -moz- for Firefox, -o- for Opera and -ms- for Internet Explorer.

Advertisements

2 thoughts on “Loading icon in CSS without using image

Your Thoughts -

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s