DIY: Page Loading

Okay, I must be honest. This isn’t great and I’m still trying to work out the kinks. So, just work with me here.

I wanted to add a page loading icon because they are cute and fairly useful for the impatient soul.

  1. Open your CSS and add this code to your sheet.

Screen Shot 2017-04-05 at 12.44.21 PM.png

 

You can change the colors where the hashtag is located.

2. Add your <div class…..>

Screen Shot 2017-04-05 at 12.45.36 PM

3. I promise you it is spinning.

Screen Shot 2017-04-05 at 12.46.10 PM

I am still trying to figure out how to place this in the container and have the @keyframes {animation-iteration-count} be something that I like. But at least you have this. Try it out and let me know if you can give me some tips!!

Advertisements

Leave a Reply

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