Add a CSS Only Loader

One of the most common things I've needed to implement when using Featherlight is a custom loader of some sort. In the past I've used SVG images and a few other methods, but I was never really happy with any them.

I recently created a Featherlight WordPress plugin for release on the plugin repository and found myself faced with the problem again. I wanted to try to solve this elegantly since I knew it could wind up being distributed on quite a lot of sites.

What I settled on is a fully-CSS loader animation which depends on the .featherlight-loading class that is added while content is being fetched. The nice thing is that it can easily be customized to display however you like since it's only using CSS. Here is how it looks by default:

In order to set up the loader and start customizing it, you just need to add the following CSS somewhere in your build:

/**
 * Featherlight Loader
 *
 * Copyright 2015, WP Site Care http://www.wpsitecare.com
 * MIT Licensed.
 */
@-webkit-keyframes featherlightLoader {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

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

@keyframes featherlightLoader {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

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

.featherlight-loading .featherlight-content {
  -webkit-animation: featherlightLoader 1s infinite linear;
          animation: featherlightLoader 1s infinite linear;
  background: transparent;
  border: 8px solid #8f8f8f;
  border-left-color: #fff;
  border-radius: 80px;
  width: 80px;
  height: 80px;
  min-width: 0;
}

.featherlight-loading .featherlight-content > * {
  display: none !important;
}

.featherlight-loading .featherlight-close,
.featherlight-loading .featherlight-inner {
  display: none;
}

In a similar fashion, you can use the close icon, as suggested in this issue