(source: https://jsfiddle.net/zw114jqn/3/)

fiddle.css

.preLoader {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a13161+0, 2a3088+100 */
	background: rgb(102, 51, 152);
	/* Old browsers */
	background: -moz-linear-gradient(left, rgba(102, 51, 152, 1) 0%, rgba(99, 91, 176, 1) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(102, 51, 152, 1) 0%, rgba(99, 91, 176, 1) 100%);
	/* Chrome10-25, Safari5.1-6 */
	background: linear-gradient(to right, rgba(102, 51, 152, 1) 0%, rgba(99, 91, 176, 1) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a13161', endColorstr='#2a3088', GradientType=1 );
	/* IE6-9 */
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 9999999999999;
	display: flex;
}
.preloader-2 {
	margin: 50px auto;
	text-align: center;
	align-self: center;
}
.preloader-2 div {
	color: #fff;
	margin: 5px 0;
	text-transform: uppercase;
	text-align: center;
	font-family: 'Arial', sans-serif;
	font-size: 10px;
	letter-spacing: 2px;
}
.preloader-2 .loaderLogo {
	height: 25px;
	overflow: hidden;
	margin-bottom: 20px !important;
}
.preloader-2 .line {
	width: 1px;
	height: 12px;
	background: #fff;
	margin: 0 1px;
	display: inline-block;
	animation: opacity-2 1000ms infinite ease-in-out;
}
.preloader-2 .line-1 {
	animation-delay: 800ms;
}
.preloader-2 .line-2 {
	animation-delay: 600ms;
}
.preloader-2 .line-3 {
	animation-delay: 400ms;
}
.preloader-2 .line-4 {
	animation-delay: 200ms;
}
.preloader-2 .line-6 {
	animation-delay: 200ms;
}
.preloader-2 .line-7 {
	animation-delay: 400ms;
}
.preloader-2 .line-8 {
	animation-delay: 600ms;
}
.preloader-2 .line-9 {
	animation-delay: 800ms;
}
@keyframes opacity-2 {
	0% {
		opacity: 1;
		height: 15px;
	}
	50% {
		opacity: 0;
		height: 12px;
	}
	100% {
		opacity: 1;
		height: 15px;
	}
}

fiddle.html

<div id="preLoader" class="preLoader">
  <div class="preloader-2">
    <span class="line line-1"></span>
    <span class="line line-2"></span>
    <span class="line line-3"></span>
    <span class="line line-4"></span>
    <span class="line line-5"></span>
    <span class="line line-6"></span>
    <span class="line line-7"></span>
    <span class="line line-8"></span>
    <span class="line line-9"></span>
  <div>Loading</div>
  </div>
</div>