#loader-wrapper {
		position: fixed;
		top: 90px;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
	}
	#loader {
		display: block;
		position: relative;
		left: 50%;
		top: 40%;
		width: 150px;
		height: 150px;
		margin: -75px 0 0 -75px;
		
		border: 3px solid transparent;
		border-top-color: #3498db;
		z-index: 1500;
		border-radius: 50%;
		
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
	}
	#loader:before {
		content: "";
		position: absolute;
		top: 5px;
		left: 5px;
		right: 5px;
		bottom: 5px;
		
		border: 3px solid transparent;
		border-top-color: #e74c3c;
		border-radius: 50%;
		
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
	}
	#loader:after {
		content: "";
		position: absolute;
		top: 15px;
		left: 15px;
		right: 15px;
		bottom: 15px;
		
		border: 3px solid transparent;
		border-top-color: #f9c922;
		border-radius: 50%;
		
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
	}	
	/* change border to transparent and set only border-top to a solid color */
	
/* copy and paste the animation inside all 3 elements */
/* #loader, #loader:before, #loader:after */
    @-webkit-keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

    /* Loaded */
    .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.5s ease-out;  
                transition: all 0.5s ease-out;
    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.5s 1s ease-out;  
                transition: all 0.5s 1s ease-out;
    }
    
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {
        display: none;
    }