Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="loading_spinner_wrapper">
  <div class="loading_label">loading<br>awesomeness</div>
  <div class="loading_spinner"></div>
</div>

              
            
!

CSS

              
                .loading_spinner_wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.loading_spinner_wrapper .loading_label {
  position: relative;
  top: 150px;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: #f2f2f2;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 700;

  -webkit-animation: glowfont 13s ;
  animation: glowfont 13s;


  &.no_animation{
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
    color: #606060;
  }

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes "glowfont" {
 0% {
    color: #f2f2f2;
 }
 50% {
    color: #606060;
 }
 100% {
    color: #f2f2f2;
 }

}

@-moz-keyframes glowfont {
 0% {
   color: #f2f2f2;
 }
 50% {
   color: #606060;
 }
 100% {
   color: #f2f2f2;
 }

}

@-webkit-keyframes "glowfont" {
 0% {
   color: #f2f2f2;
 }
 50% {
   color: #606060;
 }
 100% {
   color: #f2f2f2;
 }

}

@-ms-keyframes "glowfont" {
 0% {
   color: #f2f2f2;
 }
 50% {
   color: #606060;
 }
 100% {
   color: #f2f2f2;
 }

}

@-o-keyframes "glowfont" {
 0% {
   color: #f2f2f2;
 }
 50% {
   color: #606060;
 }
 100% {
   color: #f2f2f2;
 }

}

.loading_spinner {
  top: 50%;
  position: relative;
  margin: 5em auto 0 auto;
  width: 6em;
  height: 6em;

  -webkit-animation-name: rotate;
  -moz-animation-name: rotate;
  -ms-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
}

.loading_spinner,.loading_spinner:before,.loading_spinner:after {
  border-radius: 100%;
  -webkit-animation-duration: 3s;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-timing-function: cubic-bezier(0.000, 1.650, 0.910, -0.600);
  -moz-animation-timing-function: cubic-bezier(0.000, 1.650, 0.910, -0.600);
  -ms-animation-timing-function: cubic-bezier(0.000, 1.650, 0.910, -0.600);
  -o-animation-timing-function: cubic-bezier(0.000, 1.650, 0.910, -0.600);
  animation-timing-function: cubic-bezier(0.000, 1.650, 0.910, -0.600);
}

.loading_spinner:before,.loading_spinner:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}

.loading_spinner:before {
  background: rgba(200, 250, 100, 0);

  -webkit-animation-name: ring;
  -moz-animation-name: ring;
  -ms-animation-name: ring;
  -o-animation-name: ring;
  animation-name: ring;
}

.loading_spinner:after {
  background: rgba(250, 0, 200, 0);

  -webkit-animation-name: ring2;
  -moz-animation-name: ring2;
  -ms-animation-name: ring2;
  -o-animation-name: ring2;
  animation-name: ring2;
}

@keyframes "rotate" {
 0% {
    -webkit-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
    -moz-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
    -o-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
    -ms-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
    transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
    -webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
85%,100% {
  /* 360deg * 10 */

-webkit-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  -moz-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  -o-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  -ms-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);

  -webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-moz-keyframes rotate {
 0% {
   -moz-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
   transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
85%,100% {
  /* 360deg * 10 */
  -moz-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-webkit-keyframes "rotate" {
 0% {
   -webkit-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
   transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
   -webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
85%,100% {
  /* 360deg * 10 */

-webkit-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);

  -webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-ms-keyframes "rotate" {
 0% {
   -ms-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
   transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
85%,100% {
  /* 360deg * 10 */
  -ms-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-o-keyframes "rotate" {
 0% {
   -o-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
   transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
85%,100% {
  /* 360deg * 10 */
  -o-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@keyframes "ring" {
 0% {
    -webkit-transform: scaleX(0.1) scaleY(0.5);
    -moz-transform: scaleX(0.1) scaleY(0.5);
    -o-transform: scaleX(0.1) scaleY(0.5);
    -ms-transform: scaleX(0.1) scaleY(0.5);
    transform: scaleX(0.1) scaleY(0.5);
    -webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
75%,100% {
  -webkit-transform: scaleX(2) scaleY(2.1);
  -moz-transform: scaleX(2) scaleY(2.1);
  -o-transform: scaleX(2) scaleY(2.1);
  -ms-transform: scaleX(2) scaleY(2.1);
  transform: scaleX(2) scaleY(2.1);

  -webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-moz-keyframes ring {
 0% {
   -moz-transform: scaleX(0.1) scaleY(0.5);
   transform: scaleX(0.1) scaleY(0.5);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
75%,100% {
  -moz-transform: scaleX(2) scaleY(2.1);
  transform: scaleX(2) scaleY(2.1);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-webkit-keyframes "ring" {
 0% {
   -webkit-transform: scaleX(0.1) scaleY(0.5);
   transform: scaleX(0.1) scaleY(0.5);
   -webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
75%,100% {
  -webkit-transform: scaleX(2) scaleY(2.1);
  transform: scaleX(2) scaleY(2.1);

  -webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-ms-keyframes "ring" {
 0% {
   -ms-transform: scaleX(0.1) scaleY(0.5);
   transform: scaleX(0.1) scaleY(0.5);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
75%,100% {
  -ms-transform: scaleX(2) scaleY(2.1);
  transform: scaleX(2) scaleY(2.1);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-o-keyframes "ring" {
 0% {
   -o-transform: scaleX(0.1) scaleY(0.5);
   transform: scaleX(0.1) scaleY(0.5);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
75%,100% {
  -o-transform: scaleX(2) scaleY(2.1);
  transform: scaleX(2) scaleY(2.1);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@keyframes "ring2" {
 0% {
    -webkit-transform: scaleX(0.5) scaleY(0.1);
    -moz-transform: scaleX(0.5) scaleY(0.1);
    -o-transform: scaleX(0.5) scaleY(0.1);
    -ms-transform: scaleX(0.5) scaleY(0.1);
    transform: scaleX(0.5) scaleY(0.1);
    -webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
65%,100% {
  -webkit-transform: scaleX(2) scaleY(2.1);
  -moz-transform: scaleX(2) scaleY(2.1);
  -o-transform: scaleX(2) scaleY(2.1);
  -ms-transform: scaleX(2) scaleY(2.1);
  transform: scaleX(2) scaleY(2.1);

  -webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-moz-keyframes ring2 {
 0% {
   -moz-transform: scaleX(0.5) scaleY(0.1);
   transform: scaleX(0.5) scaleY(0.1);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
65%,100% {
  -moz-transform: scaleX(2) scaleY(2.1);
  transform: scaleX(2) scaleY(2.1);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-webkit-keyframes "ring2" {
 0% {
   -webkit-transform: scaleX(0.5) scaleY(0.1);
   transform: scaleX(0.5) scaleY(0.1);
   -webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
65%,100% {
  -webkit-transform: scaleX(2) scaleY(2.1);
  transform: scaleX(2) scaleY(2.1);

  -webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-ms-keyframes "ring2" {
 0% {
   -ms-transform: scaleX(0.5) scaleY(0.1);
   transform: scaleX(0.5) scaleY(0.1);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
65%,100% {
  -ms-transform: scaleX(2) scaleY(2.1);
  transform: scaleX(2) scaleY(2.1);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

@-o-keyframes "ring2" {
 0% {
   -o-transform: scaleX(0.5) scaleY(0.1);
   transform: scaleX(0.5) scaleY(0.1);
   box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }

/* hidden */
65%,100% {
  -o-transform: scaleX(2) scaleY(2.1);
  transform: scaleX(2) scaleY(2.1);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}

}

              
            
!

JS

              
                
              
            
!
999px

Console