Edit on
.loader
  .loader--text Loading...
  .loader--bg
View Compiled
body {
  padding: 0;
  margin: 0;
}

@keyframes scale { 
	0% { 
		transform: scale(3); 
		opacity: 0;
	} 
	50% { 
		transform: scale(1); 
		opacity: 1;
	}
  100% { 
		transform: scale(1); 
		opacity: 1;
	}
}

.loader {
  position: relative;
	width: 100%;
	height: 100vh;
  overflow: hidden;
	&--text,
	&--bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
    background-image: url('https://farm4.staticflickr.com/3888/15002876851_945906f3d6_b.jpg');
    background-size: cover;
	}
	&--text {
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
		opacity: 0;
		color: white;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    backface-visibility: hidden;
		background: linear-gradient(to left top, darkblue, darkblue 50%, purple 50%,  purple);
		background: black;
		font-size: 6rem;
		font-weight: bold;
		text-align: center;
		width: 100%;
		text-transform: uppercase;
		mix-blend-mode: darken;
    animation: scale 2s ease-in-out 0s infinite alternate;
	}
}
View Compiled
Rerun