lychee/assets/scss/loading.scss

/**
 * @name        loading.css
 * @author      Tobias Reich
 * @copyright   2014 by Tobias Reich
 */

#loading {
	position: fixed;
	width: 100%;
	height: 3px;
	background-size: 100px 3px;
	background-repeat: repeat-x;
	border-bottom: 1px solid rgba(0,0,0,.3);
	display: none;
	animation-name: moveBackground;
	animation-duration: .3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

	/* Modes ------------------------------------------------*/
	#loading.loading {
		background-image: linear-gradient(to right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
		z-index: 2;
	}
	#loading.error {
		background-color: #2f0d0e;
		background-image: linear-gradient(to right, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
		z-index: 1;
	}

	/* Content ------------------------------------------------*/
	#loading h1 {
		margin: 13px 13px 0px 13px;
		color: #ddd;
		font-size: 14px;
		font-weight: bold;
		text-shadow: 0px 1px 0px #000;
		text-transform: capitalize;
	}
	#loading h1 span {
		margin-left: 10px;
		font-weight: normal;
		text-transform: none;
	}