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 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.

Quick-add: + add another resource

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.

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
Loading ..................

Console