<div id="wrap">

		<div class="logo">
			<span>This is SPARTA!</span>
		</div>
		
		<button id="load"><span>Load!</span></button>

	</div>

//	autoprefixer: true

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #fff;
	color: #fff;
	font-size: 18px;
	font-family: 'Open Sans', sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	outline: none;
}

#wrap {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	font-size: 60px;
	color: #ccc;
	font-weight: 700;
	position: relative;
	white-space: nowrap;
	
	&::before {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 100%;
		content: 'This is SPARTA!';
		color: #000;
		overflow: hidden;
		transition: width 2s ease;
	}
	
	&--loaded {
		&::before {
			width: 100%;	
		}
	}
}

#load {
	width: 200px;
	padding: 10px;
	font-size: 20px;
	margin: 60px auto 0;
}

$(function() {
	$('#load').click(function() {
		$('.logo').addClass('logo--loaded');
	});
});