.loader
  %div
    %div
      %div
        %div
          %div
            %div
              %div
                %div
                  %div
                    %div
                      %div
                        %div
                          %div
                            %div
                              %div
                                %div
                                  %div
                                    %div
                                      %div
                                        %div
                                          %div
                                            %div
                                              %div
                                                %div
                                                  %div
                                                    %div
View Compiled
@import "compass/css3";

* {
  border: 0;
  padding: 0;
  border: 0;
}

html, body {
  min-height: 100%;
}

body {
  font-size: 1em;
  background: radial-gradient(#444,#000);
  overflow: hidden;
}

.loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 10em;
  height: 10em;
  border-radius: 100%;
  div {
    height: 100%;
    width: 100%;
    border-radius: 100%;
    box-sizing: border-box;
    border-bottom: 0.2em solid grey;
    border-top: 0.2em solid grey;
    border-left: 0.2em solid aqua;
    border-right: 0.2em solid aqua;
    animation: spin 10s infinite linear;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js