The HTML

HTML is pretty minimal in this example… We can create the simplest of loading spinners with just one single DOM element. Here’s how it looks:

1

<div class="spinner"></div>

That’s all the HTML we need to create our spinner.

The CSS

Creating the Shape

1
2
3
4
5
6
7
8
9

.spinner {
  width:  5em;
  height: 5em;
  border-top:    0.75em solid red;
  border-left:   0.75em solid green;
  border-right:  0.75em solid blue;
  border-bottom: 0.75em solid orange;
  border-radius: 50%;
}

The width and the height are up to you. To make a circle, they need to be the same (obviously). I’ll be using borders to create a “donut” shape. The border width can vary, but between 0.5 and 1 em seemed to look good here. Then, we round the (currently square) div by giving it a border-radius of 50%.

Animating the Shape

Disclaimer: Your mileage may vary on the vendor prefixes. I generally use compass w/ Sass or Lea Verou’s Prefix Free, so most of these prefixes were looked up and not totally tested across all browsers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.spinner {
  /* previous shape omitted */
  -webkit-animation: spin 2s infinite linear;
  -moz-animation:    spin 2s infinite linear;
  -o-animation:      spin 2s infinite linear;
  animation:         spin 2s infinite linear;
}

@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(360deg);}
}

@-moz-keyframes spin {
  100% { -moz-transform: rotate(360deg); }
}

@-o-keyframes spin {
  100% { -o-transform: rotate(360deg); }
}
@keyframes spin {
  100% { transform: rotate(360deg);   }
}

The spinning animation is actually very simple. Using keyframes, we can simply transform our shape 360 degrees in the amount of time specified in the animation. You can play with the different easing functions (linear, ease, cubic-bezier(), ...) and choose which animation you like best.

The Demo

(May need a refresh to see spinning)

See the Pen Jpums by Cody Henshaw (@brbcoding) on CodePen

Just for fun… No extra html, just the body element and pseudo-elements

(May need a refresh to see spinning)

Keep in mind, this isn’t very practical. You could add a class to the body and work off of that and make it slightly better, but you’re probably better off just creating an element and hiding it until you need it.
This demo uses prefix free as well as Sass (Scss syntax).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$gray: rgba(0, 0, 0, 0.75);
body {
  &:after {
  content: "";
  width: 5em;
  height: 5em;
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  margin: auto;
  border-top: 0.5rem solid $gray;
  border-right: 0.25rem solid transparent;
  border-left: 0.5rem solid $gray;
  border-radius: 50%;
  animation: spin 1.5s infinite linear;
  }
}

@keyframes spin {
   100% { transform: rotate(360deg); }
}

By using only 3 borders, we are able to create a different type of spinner. The border-radius again creates the rounded shape of the spinner. The keyframes just rotate the pseudo-element 360 degrees over the duration of the animation. With a linear easing function, we create a smooth spinning effect.

See the Pen axyDz by Cody Henshaw (@brbcoding) on CodePen

Now you should have an awesome spinner… Play around with different animations, directions, colors, etc… to make it your own. You can also use pseudo-elements to create multiple spinner shapes, positioned absolutely on top of one another. This can create a cool effect as well. That’s beyond the scope of this post, but here’s you can see this in action here. Thanks for stopping by and feel free to say hi @CodyHenshaw.

Using icon fonts with pseudo-elements is ridiculously easy. Choosing between icon font sets will take a lot longer than the actual implementation. I’ll give an example below with some icons from the super popular font awesome set. We will import the icons from @TimPietrusky’s always useful, weloveiconfonts.

Locating the values to use for each icon

I personally run Chrome in my day-to-day, so I generally use devtools for a lot of my testing… Here are some screenshots illustrating the “look up” process for these icon fonts. We will start by looking at the Cheat Sheet on the font awesome github page.

First, select an icon font. You’ll be taken to the corresponding page which displays that icon in different sizes. From here, there are two ways we can go about finding the actual unicode value.

1. It will be displayed in light gray next to the icon font’s title.
2. More commonly, you’ll need to check out the source to find out the corresponding unicode. To do this, right click an icon font and click inspect element. You may have to scroll a bit to find it, but in the styles view on the right-hand side, you’ll find a css declaration that looks very similar to the example we used before.
   

That’s it! We can put icon fonts everywhere now! (don’t do that, seriously.)

Prerequisites:

• Amazon Web Services (AWS) Account
• SSH (I will be using Cygwin w/ SSH)

Creating a new AWS EC2 Instance

At this point, I will assume that you have created an account with Amazon Web Services (AWS) and have also installed some kind of SSH client. There are numerous available, but I chose to use Cygwin, since it was already installed on my machine.

After you’ve completed these prerequisites, let’s get started. First, you’ll want to sign into your AWS account, and head to your AWS management console.

We will be creating a new EC2 instance. Select EC2 from the Compute & Networking category. Other types of AWS services will be explored in future blog posts.

From here, click the Launch Instance button, which will take you to the EC2 wizard.