Cacher is the code snippet organizer for pro developers

/*! loader
=========================================== */
$loader_right_path_len: 405;	// ここはイラレから取得。もしくはchromeの画面で少しずつ試す
$loader_left_path_len : 900;	// ここはイラレから取得。もしくはchromeの画面で少しずつ試す
 
$loader_anime_stroke_time     : 900ms;
$loader_anime_stroke_cool_time: 450ms;
$loader_anime_fill_time       : 180ms;
$loader_anime_view_time       : 1200ms;
$loader_anime_fade_time       : 200ms;
 
$loader_anime_total_time: $loader_anime_stroke_time + $loader_anime_stroke_cool_time + $loader_anime_fill_time + $loader_anime_view_time + $loader_anime_fade_time;
 
$loader_timline01: $loader_anime_stroke_time / $loader_anime_total_time * 100%;
$loader_timline02: $loader_anime_stroke_cool_time / $loader_anime_total_time * 100%;
$loader_timline03: $loader_anime_fill_time / $loader_anime_total_time * 100%;
$loader_timline04: $loader_anime_view_time / $loader_anime_total_time * 100%;
$loader_timline05: $loader_anime_fade_time / $loader_anime_total_time * 100%;
 
 
@keyframes siteLoader_R {
	0% {stroke-dashoffset: $loader_right_path_len;fill: transparent;}
	#{$loader_timline01} {fill: transparent;stroke-dashoffset: 0;}
	#{$loader_timline01 + $loader_timline02} {fill: transparent;stroke-dashoffset: 0;}
	#{$loader_timline01 + $loader_timline02 + $loader_timline03} {fill: #fff;stroke-dashoffset: 0;}
	#{$loader_timline01 + $loader_timline02 + $loader_timline03 + $loader_timline04} {fill: #fff;stroke-dashoffset: 0;stroke: #fff}
	100% {fill: transparent; stroke: transparent}
}
@keyframes siteLoader_L {
	0% {stroke-dashoffset: $loader_left_path_len;fill: transparent;}
	#{$loader_timline01} {fill: transparent;stroke-dashoffset: 0;}
	#{$loader_timline01 + $loader_timline02} {fill: transparent;stroke-dashoffset: 0;}
	#{$loader_timline01 + $loader_timline02 + $loader_timline03} {fill: #fff;stroke-dashoffset: 0;}
	#{$loader_timline01 + $loader_timline02 + $loader_timline03 + $loader_timline04} {fill: #fff;stroke-dashoffset: 0;stroke: #fff}
	100% {fill: transparent; stroke: transparent}
}
 
.siteLoader {
	position: fixed;
	z-index: 99999;
	background-color: $main_color;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	&__al {
		width: 60px;
		margin: 0 auto;
		height: 100%;
	}
	&__vam {
		display: table-cell;
		height: 100vh;
		vertical-align: middle;
	}
	svg {
		width: 60px*1;
		height: 60px*1;
	}
	&__svg {
		fill: none;
		stroke-width: 1;
		fill-rule: nonzero;
		&--right {
			stroke-dasharray: $loader_right_path_len;
			stroke-dashoffset: $loader_right_path_len;
		}
		&--left  {
			stroke-dasharray: $loader_left_path_len;
			stroke-dashoffset: $loader_left_path_len;
		}
	}
	&.is_animating {
		.siteLoader {
			&__svg {
				&--right {animation: siteLoader_R $loader_anime_total_time ease 0ms infinite normal forwards;}
				&--left  {animation: siteLoader_L $loader_anime_total_time ease 0ms infinite normal forwards;}
			}
		}
	}
}