CSS, JS прелоадер, кнопка лоадер

1. Простой

Как использовать

В самом начале страницы, сразу после тега body вставить такой код:

<div class="load-container load8">
  <div class="loader">Loading...</div>
</div>

Это и есть весь блок прелоадера.

Чтобы после загрузки страницы он исчез, перед закрывающим тегом body вставляем небольшой скрипт:

<script>
  $(window).load(function () {
      $(".load-container").delay(100).fadeOut(250);
  });
</script>

Весь внешний вид и анимация прописываются в CSS:

.load-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: 99999;
}

.no-cssanimations .load-container .loader {
  text-indent: 0;
  text-align: center;
  color: #fff;
  font-size: 17px;
  background: none;
  border: 0 none;
  width: auto;
  height: auto;
  margin: 1em auto;
  overflow: visible;
  box-shadow: none;
  -webkit-animation: none;
  animation: none;
}

.no-cssanimations .load-container .loader:before,
.no-cssanimations .load-container .loader:after {
  display: none;
}

.load8 .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4.3em;
  margin-top: -4.3em;
  font-size: 10px;
  text-indent: -9999em;
  border-top: 0.6em solid rgba(255, 255, 255, 0.2);
  border-right: 0.6em solid rgba(255, 255, 255, 0.2);
  border-bottom: 0.6em solid rgba(255, 255, 255, 0.2);
  border-left: 0.6em solid #fff;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.load8 .loader, .load8 .loader:after {
  border-radius: 50%;
  width: 8em;
  height: 8em;
}

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

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

 Правда автор рассчитывал на то, что будет подключен скрип "modernizr" для поддержки старых браузеров. Если такой скрипт подключен не будет, можно убрать из CSS стили  с классами "no-cssanimations", а именно:

.no-cssanimations .load-container .loader {
  text-indent: 0;
  text-align: center;
  color: #fff;
  font-size: 17px;
  background: none;
  border: 0 none;
  width: auto;
  height: auto;
  margin: 1em auto;
  overflow: visible;
  box-shadow: none;
  -webkit-animation: none;
  animation: none;
}

.no-cssanimations .load-container .loader:before,
.no-cssanimations .load-container .loader:after {
  display: none;
}

Разное

• Небольшая подборка прелоадеров от smartaddons
• SVG лоадеры: samherbert.net/svg-loaders  
• Так же можно использовать gif-ку, вот обзор нескольких сервисов для создания: http://www.manhunter.ru/webmaster/383_generatori_preloaderov.html 
• Кнопки лоадеры: codepen.io, zaurmag.ru но лучше уж добавить svg картинку по классу...

Летящий герой

Интересный, скопировал себе. Подсмотрел у демки themexpert.