デモページはこちら

svgロードアニメーションをフェードアウトする処理を、jQueryのDeferredオブジェクトを利用して同期処理（非同期処理を待つ処理）で実装します。画像読み込みの管理ができるJavaScriptライブラリ、imagesLoaded（imagesloaded.pkgd.js）を利用しています。

全ての画像を読み込んでロードアニメーションが完了した後、ロードアニメーション用のsvg、ロードアニメーション用のオーバーレイをそれぞれ順番にフェードアウトします。jQueryで順番にaddClassするのでCSSを設定しておきます。

/* svgフェードアウト */
.is-animated .p-loader-circle-parts {
	opacity: 0;
	transform: translateY(5%);
}
.is-animated .p-loader-circle-parts-bg {
	opacity: 0;
	transform: translateY(5%);
}
.p-loader {
	position: fixed;
	z-index: 10000;
	width: 100%;
	height: 100%;
	background: #9b9dbb;
}
/* オーバーレイフェードアウト */
body.is-loaded .p-loader {
	animation: load_complete 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes load_complete {
	0% {}
	100% {
		opacity: 0;
	}
}
/* svg、オーバーレイ消去 */
.p-loader.is-loaded {
	display: none;
}

jQueryの処理です。loader_anime関数実行後、Deferredオブジェクトを利用した同期処理になっています。まず、new $.Deferred();でDeferredオブジェクトを生成しています。その後setTimeoutの非同期処理完了後、Deferredオブジェクトのresolveメソッドを実行します。ここではいったんrejectメソッドは無視しています。最後にDeferredオブジェクトのpromiseメソッドを実行し、promiseオブジェクトをreturnします。そして、returnされたpromiseオブジェクトのthenメソッドで次の処理を実行します。thenはメソッドチェーンで記述でき、非同期処理を待ってからの同期処理になります。

//imagesLoadedを利用したsvgロードアニメーション
var imgLoad = imagesLoaded(document);
var count = 0;
var img__length = imgLoad.images.length;
imgLoad.on('progress',function(){
	count++
	if(count <= img__length){
		var sl = Math.floor(100/img__length*count); //画像の読み込み割合（%）
		setTimeout(function(){
			//0.5秒置きにstroke-dashoffsetを500から0へ;
			$('.js-loader-circle-parts').css('stroke-dashoffset',Math.ceil(500 - sl * 5));
		},500);
	};
}).on('always',function(){
	setTimeout(function(){
		//全ての画像読み込み完了後、1.5秒後にloader_anime関数を実行
		loader_anime()
	},1500);
});

function loader_anime(){
	loader_action01()
	.then(loader_action02)
	.then(loader_complete);
};

function loader_action01(){
	var d = new $.Deferred();
	setTimeout(function(){
		//svgのopacityを0に
		$('.js-loader-circle').addClass('is-animated');
		d.resolve();
	},400);
	return d.promise();
}

function loader_action02(){
	var d = new $.Deferred();
	setTimeout(function(){
		//オーバーレイのopacityを0に
		$('body').addClass('is-loaded');
		d.resolve();
	},500);
	return d.promise();
}

function loader_complete(){
	var d = new $.Deferred();
	setTimeout(function(){
		//svgとオーバーレイのdisplayをnoneに
		$('#js-loader').addClass('is-loaded');
		d.resolve();
	},1000);
	return d.promise();
}