Space Ship Spinner

Single element spaceship spinner/loader.
pure css loading spinner.

By Chtiwi Malek,
http://www.codicode.com

Framework 1 :

Framework 2 :

+ Js file(s) :	http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js

+ Css file(s) :
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="691" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

CSS

/* By Chtiwi Malek =&gt; http://www.codicode.com */
body{
  background-color:#fff;
}
.spinner {
  font-size: 6px;
  margin: 8em auto;
  overflow: hidden;
  text-indent: -999em;
  border-radius: 50%;
  width: 10em;
  height: 10em;
  border: 1.1em solid rgba(0, 0, 0, 0.2);
  border-bottom: 1.1em solid #000;
  border-top: 1.1em solid #000;
  box-shadow: -5em 0em 0em -3.9em #200, 5em 0em 0em -3.9em #200, 5em 0em 0em -3em rgba(0, 0, 0, 0.4), -5em 0em 0em -3em rgba(0, 0, 0, 0.4), 0em 0em 0em 2em rgba(0, 0, 0, 0.2);
  animation: spin10 2s infinite linear;
}
@keyframes spin10 {
  33%,66% {
    box-shadow: -5em 0em 0.5em -3.85em #f00, 5em 0em 0.5em -3.85em #f00, 5em 0em 0em -3em rgba(0, 0, 0, 0.4), -5em 0em 0em -3em rgba(0, 0, 0, 0.4), 0em 0em 0em 2em rgba(0, 0, 0, 0.2);
  }
  23%,53%,56%,86% {
    box-shadow: -5em 0em 0em -3.9em #200, 5em 0em 0em -3.9em #200, 5em 0em 0em -3em rgba(0, 0, 0, 0.4), -5em 0em 0em -3em rgba(0, 0, 0, 0.4), 0em 0em 0em 2em rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: rotate(1turn);
  }
}

Javascript

Space Ship Spinner

Link :

Fork button :

Embed preview :