CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

The Best CSS Spinners & Loaders

Using modern CSS and HTML, it has never been easier to create loading spinners of any kind. This article showcases over 40 different techniques and styles of pure CSS3 animations for creating any CSS loader your website may need.

Vertically Align With Flexbox

Centering a text or element vertically has always been quite a pain for many front-end developers. Introduced in the CSS3 specification, the display: flex property/value provides an easy way to vertically align any element.

Consider the following HTML:

<div class="align-vertically">
  I am vertically centered!
</div>

And the related CSS:

.align-vertically {
  background: #13b5ea;
  color: #fff;
  display: flex;
  align-items: center;
  height: 200px;
}

display: flex specifies a Flexbox layout for the element, and align-items: center takes care of the vertical centering. Click here to view a demo of this technique.

Source: WebDevBlog

Using SVG for Icons and Logos

SVG is supported by all modern browsers and scales well for all resolution types, so there’s no reason to continue using .jpg or .gif images for logos or icons.

The code below represents the CSS code used to display a website logo:

#logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(logo.svg);
  background-size: 100px 82px;
}

Note the use of the background-size property, which is used to scale the background image to fit the container size.

What is a CSS Loading Spinner?

If you use a computer, you have already seen spinners multiple times. They are small animations used to indicate that something is loading and that the user needs to wait a bit. Your operating system, for example, displays a loading spinner when you launch a program. It indicates that the OS has understood the instruction and is in the process of launching the desired application. The user can then know that their request is being processed and that they just need to wait a bit for the program to be launched and operational.

On the Internet, spinners and loaders have always been used on sites and apps, with the same goal as their desktop counterparts. Years ago, loading spinners were mostly in the form of a .gif image. But as images tend to consume lots of bandwidth and generally slow down the loading speed of websites, web developers moved to a more efficient solution: Spinners in pure CSS.

Using a CSS animation instead of a .gif image, we can avoid the image request (which consumes bandwidth and slows down the site loading process) and have many more possibilities in terms of customization and maintenance.Table of Contentsshow

CSS Loaders by Luke Haas

This nice collection of eight different CSS3 animations comes with demos and the source code. Every loading spinner from this collection is made in pure CSS and is easy to integrate in any website or app.

Let’s take a look at the code: In this example, I am featuring the 3rd spinner from the left, on the top row. The CSS and HTML isn’t really complicated. Here’s our HTML code:

<div class="loader">Loading...</div>

And the associated CSS:

.loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #0dc5c1;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

A few things to note about this CSS: First, notice the use of the pseudo-classes :before and :after. Then, you can spot @keyframes, which is used to create the loading animation. If you need more information about CSS animations, please refer to our CSS Tricks article.

→ More info/View sources

Spinkit Loaders

Let’s continue our round-up with these 12 pure CSS loaders, which are super easy to integrate in any kind of site. Each loading animation comes with the CSS and HTML source code that you can freely use in any of your projects.

Compared to Luke Haas’ loaders, these tend to be a bit complex and use much more CSS code.
→ More info/View sources

CSSLoad

Probably the most complete library of the genre available on the Internet, cssload.net is an entire website dedicated to loaders of all kinds.

Not only this useful site lets you choose between over a hundred different styles of spinners, but you can also customize most of them. The output CSS and HTML code is clean, concise, and ready to use on your website or app.
→ More info/View sources