svg loader

gruntfile.js

@@ -2,18 +2,6 @@ module.exports = function(grunt) {
 	
 	grunt.initConfig({
 	  pkg: grunt.file.readJSON('package.json'),
-
-	  htmlmin: {
-	    dist: {
-	      options: {
-	        removeComments: true,
-	        collapseWhitespace: true
-	      },
-	      files: {
-	        'svg.html': 'svg.min.html',
-	      }
-	    },
-	  },
 		
 		cssmin: {
 		  css: {
@@ -57,7 +45,6 @@ module.exports = function(grunt) {
 		  
 	});
 	
-	grunt.loadNpmTasks('grunt-contrib-htmlmin');
 	grunt.loadNpmTasks('grunt-contrib-cssmin');
 	grunt.loadNpmTasks('grunt-contrib-concat');
 	grunt.loadNpmTasks('grunt-contrib-jshint');

js/init.js

@@ -5,9 +5,9 @@ $('.nav-toggle').on( 'click', function() {
 });
 
 $(window).bind("load", function () {
-    $('#loader').fadeOut(99900);
+    $('#loader').fadeOut(2700);
 });
-	
+
 var headerHeight = $('.navbar').height();
 $(window).on('scroll', { previousTop: 0 },
 function() {

style.css

@@ -142,24 +142,165 @@ input,button,select,textarea {font-family: inherit;font-size: inherit;line-heigh
   background-color: #222;
 }
 .loading-animation {
-	width: 150px;
-	height: 150px;
+	width: 250px;
+	height: 250px;
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	right: 0;
 	left: 0;
 	margin: auto;
-  -moz-animation: spin .5s infinite linear;
-  -webkit-animation: spin .5s infinite linear;
-  -o-animation: spin .5s infinite linear;
-  animation: spin .5s infinite linear;
 }
+
+.loading-animation svg {
+	position:absolute;
+	top:0;
+	left:0;
+	-webkit-transform-origin:center center;
+	-ms-transform-origin:center center;
+	-o-transform-origin:center center;
+	transform-origin:center center;
+	-webkit-transition:all 0.3s;
+	-o-transition:all 0.3s;
+	transition:all 0.3s;
+	-webkit-transform:rotateY(0deg);
+	-ms-transform:rotateY(0deg);
+	-o-transform:rotateY(0deg);
+	transform:rotateY(0deg);
+}
+.loading-animation path {
+	fill:none;
+	stroke:#fff;
+	stroke-width:2;
+	-webkit-transition:all .3s;
+	-o-transition:all .3s;
+	transition:all .3s;
+}
+.loading-animation .l1 path {
+	fill:rgba(242,242,242,.1);
+	stroke-dasharray:450;
+	stroke-dashoffset:900;
+	-webkit-animation:LOADING1 4s linear 0s infinite;
+	-o-animation:LOADING1 4s linear 0s infinite;
+	animation:LOADING1 4s linear 0s infinite;
+}
+.loading-animation .l2 path {
+	fill:rgba(242,242,242,.1);
+	stroke-dasharray:340;
+	stroke-dashoffset:340;
+	-webkit-animation:LOADING2 3s linear 0s infinite;
+	-o-animation:LOADING2 3s linear 0s infinite;
+	animation:LOADING2 3s linear 0s infinite;
+}
+.loading-animation .l3 path {
+	fill:none;
+	stroke-width:1;
+	stroke-dasharray:33;
+	stroke-dashoffset:33;
+	-webkit-animation:LOADING3 2s linear 0s infinite;
+	-o-animation:LOADING3 2s linear 0s infinite;
+	animation:LOADING3 2s linear 0s infinite;
+}
+
+@-webkit-keyframes LOADING1 {
+	0%{stroke-dashoffset:-900;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:900;}
+}
+@-moz-keyframes LOADING1 {
+	0%{stroke-dashoffset:-900;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:900;}
+}
+@-o-keyframes LOADING1 {
+	0%{stroke-dashoffset:-900;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:900;}
+}
+@keyframes LOADING1 {
+	0%{stroke-dashoffset:-900;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:900;}
+}
+
+@-webkit-keyframes LOADING2 {
+	0%{stroke-dashoffset:340;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:-340;}
+}
+@-moz-keyframes LOADING2 {
+	0%{stroke-dashoffset:340;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:-340;}
+}
+@-o-keyframes LOADING2 {
+	0%{stroke-dashoffset:340;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:-340;}
+}
+@keyframes LOADING2 {
+	0%{stroke-dashoffset:340;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:-340;}
+}
+
+@-webkit-keyframes LOADING3 {
+	0%{stroke-dashoffset:-230;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:230;}
+}
+@-moz-keyframes LOADING3 {
+	0%{stroke-dashoffset:-230;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:230;}
+}
+@-o-keyframes LOADING3 {
+	0%{stroke-dashoffset:-230;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:230;}
+}
+@keyframes LOADING3 {
+	0%{stroke-dashoffset:-230;}
+	50%{stroke-dashoffset:0;}
+	100%{stroke-dashoffset:230;}
+}
+
+.svg-wrap .l1 {
+	-webkit-animation:TURN 3s linear 0s infinite;
+	-o-animation:TURN 3s linear 0s infinite;
+	animation:TURN 3s linear 0s infinite;
+}
+.svg-wrap .l2 {
+	-webkit-animation:TURN 2s linear 0s infinite;
+	-o-animation:TURN 2s linear 0s infinite;
+	animation:TURN 2s linear 0s infinite;
+}
+.svg-wrap .l3 {
+	-webkit-animation:TURN 4.5s linear 0s infinite;
+	-o-animation:TURN 4.5s linear 0s infinite;
+	animation:TURN 4.5s linear 0s infinite;
+}
+
+@-webkit-keyframes TURN {
+	0%{-webkit-transform:rotateY(0deg);opacity:1} 
+	25%{-webkit-transform:rotateY(90deg);opacity:.6} 
+	50%{-webkit-transform:rotateY(180deg);opacity:1} 
+	75%{-webkit-transform:rotateY(270deg);opacity:.6} 
+	100%{-webkit-transform:rotateY(360deg);opacity:1}}
+@-webkit-keyframes TURNBACK {
+	0%{-webkit-transform:rotateY(360deg);opacity:1} 
+	25%{-webkit-transform:rotateY(270deg);opacity:.6} 
+	50%{-webkit-transform:rotateY(180deg);opacity:1} 
+	75%{-webkit-transform:rotateY(90deg);opacity:.6} 
+	100%{-webkit-transform:rotateY(0deg);opacity:1}}
+
+
 .zw-logo {
 	transform-origin: 50% 50%;
   -webkit-transform-origin: 50% 50%;
   animation:  spin 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
 }
+
 @keyframes spin {
 	50% {
 	  transform: rotate(360deg);