cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div class="ajax-loader">
  <div class="ajax-loader-logo">
    <!-- circle -->
    <div class="ajax-loader-circle">
      <svg class="ajax-loader-circle-spinner"
           viewBox="0 0 500 500"
           xml:space="preserve">
        <circle
                cx="250" cy="250" r="239" />
      </svg>
    </div>

    <!-- Letters -->
    <div class="ajax-loader-letters">
      <svg
           viewBox="0 0 500 500"
           xml:space="preserve">
        <path
              class="ajax-loader-m"	
              d="m 352.03895,264.80278 c -16.93432,41.68204 -33.8677,83.36408 -50.77967,124.99117 -1.97244,0 -3.73721,0 -5.61559,0 -16.61955,-41.9875 -33.20185,-83.88652 -49.786,-125.78648 -0.15739,0.0317 -0.31384,0.0643 -0.47123,0.0968 -6.34292,40.41364 -12.68584,80.82915 -19.04086,121.32009 -6.67446,0 -13.1254,0 -19.9321,0 10.66218,-55.19765 21.29641,-110.25374 31.95766,-165.443 2.25182,0 4.45057,0 6.79924,0 18.25394,44.43582 36.51812,88.89772 54.7823,133.35775 0.15366,0.0196 0.30732,0.0373 0.46098,0.0568 17.91402,-44.48704 35.8299,-88.97408 53.75231,-133.48162 2.2481,0 4.39003,0 6.7592,0 10.07267,55.14084 20.1379,110.23605 30.23293,165.50168 -7.07676,0 -13.90488,0 -21.06918,0 -3.0192,-20.01591 -5.8242,-40.10633 -8.76889,-60.17532 -2.94935,-20.10345 -5.8093,-40.21994 -8.70929,-60.3299 -0.18998,-0.0373 -0.3809,-0.0726 -0.57181,-0.10803 z" />
        <path
              class="ajax-loader-e"	
              d="m 198.8385,177.4547 c 0,5.86052 0,11.35318 0,17.08332 -23.31448,0 -46.52746,0 -69.6706,0 -0.53176,1.8132 -0.64072,61.29657 -0.14248,64.00007 23.16176,0 46.36915,0 69.74417,0 0,6.06633 0,11.89332 0,17.8451 -29.98894,0 -59.89221,0 -89.92771,0 0,-55.30195 0,-110.47631 0,-165.64695 1.62228,-0.51407 84.24786,-0.75247 89.7042,-0.26169 0.49358,1.52357 0.63606,14.37704 0.14621,17.80227 -11.61394,0 -23.2791,0 -34.94239,0 -11.59718,0 -23.19343,0 -34.90329,0 0,16.46496 0,32.60583 0,49.07451 3.31069,0.20953 66.45025,0.10337 69.99189,0.10337 z" />
      </svg>
    </div>
  </div>
</div>
            
          
!
            
              @import "compass/css3";

$loader_duration: 1.4s;
$loader_offset: 1570; // (2 x pie x r = 250 (from svg))
.ajax-loader{
	@include transition(750ms ease-out);
	@extend %absoluteFullSize;
	z-index: 50;

	.ajax-loader-logo{
		position: absolute;
		left: 50%;
		top: 50%;
		@include translate(-50%, -50%);
		width: 100px;
		height: 100px;
	}

	// Circle
	.ajax-loader-circle{
		@extend %absoluteFullSize;
		@include transform-origin(50%, 50%);
		@include animation(
			ajaxLoaderSpin $loader_duration linear infinite
		);

		.ajax-loader-circle-spinner{
			@extend %absoluteFullSize;
			@include transform-origin(50%, 50%);
			@include animation(
				ajaxLoaderDashSpin $loader_duration ease-in-out infinite
			);
		}

		circle{
			@extend %absoluteFullSize;
			@include animation(
				ajaxLoaderColors ($loader_duration*4) ease-in-out infinite,
				ajaxLoaderDash $loader_duration ease-in-out infinite
			);

			stroke-dasharray: $loader_offset;
         stroke-dashoffset: $loader_offset*.25;
			stroke: #fff;
		   	stroke-width: 19; 
		   	fill: none;
		}
	}

	// Letters
	.ajax-loader-letters{
		@extend %absoluteFullSize;

		path{
			fill: #fff;
		}
	}
}

// Spinner
@include keyframes(ajaxLoaderSpin){
	0% { 
		@include rotate(0deg); 
	}
	100% { 
		@include rotate(270deg); 
	}
};
@include keyframes(ajaxLoaderColors){
	0% { stroke: #35ad0e; }
	25% { stroke: #d8ad44; }
	50% { stroke: #d00324; }
	75% { stroke: #dc00b8; }
	100% { stroke: #017efc; }
}
@include keyframes(ajaxLoaderDash){
	0% { 
		stroke-dashoffset: $loader_offset*.9; 
	}
	50% {
		stroke-dashoffset: $loader_offset*.25;
	}
	100% {
		stroke-dashoffset: $loader_offset*.9;
	}
};
@include keyframes(ajaxLoaderDashSpin){
	0% { 
	}
	50% {
		@include rotate(135deg);
	}
	100% {
		@include rotate(450deg);
	}
};

@mixin absoluteFullSize{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
%absoluteFullSize{ @include absoluteFullSize; }

body{
	background: #141414;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console