Creare un preloader con CSS3

by Code4Life

HTML

<div class="demo-content">
	<div class="custom-loader-mask">
		<div class="custom-loader"></div>
	</div>
</div>

<!-- Credits -->
<div class="credits">
	<a class="btn-credits" href="https://code4life.it/guide/creare-un-preloader-animato-con-css3/" target="_blank">Vedi articolo completo</a>
</div>

CSS

/*
 * TITLE:   Creare un preloader con CSS3
 * AUTHOR:  Code4Life
 * WEBSITE: https://code4life.it/
 * ARTICLE: https://code4life.it/guide/creare-un-preloader-animato-con-css3/
 */

/* Required snippet style */
.custom-loader-mask {
	background: rgba( 0, 0, 0, 0.8 );
	bottom: 0;
	left: 0;
	position:
	fixed;
	right: 0;
	top: 0;
	z-index: 999;
}

.custom-loader {
	left: 50%;
	position: absolute;
    top: 50%;
    transform: translate( -50%, -50% );
    -webkit-transform: translate( -50%, -50% );
}

.custom-loader:before {
    border-top: 1em solid #33b5e5;
    border-right: 1em solid #33b5e5;
    border-bottom: 1em solid #33b5e5;
    border-left: 1em solid transparent;
    border-radius: 50%;
    content: '';
    display: block;
    height: 5rem;
    width: 5rem;
    animation: animation 1.1s infinite linear;
    -webkit-animation: animation 1.1s infinite linear;
}

@keyframes animation {
    0% {
        -webkit-transform: rotate( 0deg );
        transform: rotate( 0deg );
    }
    100% {
        -webkit-transform: rotate( 360deg );
        transform: rotate( 360deg );
    }
}
@-webkit-keyframes animation {
    0% {
        -webkit-transform: rotate( 0deg );
        transform: rotate( 0deg );
    }
    100% {
        -webkit-transform: rotate( 360deg );
        transform: rotate( 360deg );
    }
}

/* Demo style only */
.demo-content { margin-bottom: 70px; text-align: center; }

/* Credits */
@import url( 'https://fonts.googleapis.com/css?family=Roboto:300' );
.credits { background: #F3F5F6; border: solid 1px #CFD6D9; bottom: 40px; left: 0; padding: 10px; position: fixed; right: 0; text-align: center; z-index: 1000; }
.btn-credits { border: 2px solid #33b5e5; border-radius: 10em; color: #33b5e5 !important; display: inline-block; font-family: 'Roboto', sans-serif; font-size: .8rem; line-height: 1.25; padding: .85rem 2.13rem;  text-decoration: none; text-transform: uppercase; transition: .2s ease-out; vertical-align: middle; }
.btn-credits:hover { background-color:...

JavaScript

jQuery( function( $ ) {
	// Delay added for demo purpose only, delete it on production
	$( '.custom-loader-mask' ).delay( '5000' ).fadeOut( 'slow' );
} );