.load-bar {
	float: right;
	height: 100%;
	overflow: hidden;
	width: 50%;
	&:first-child {
		float: left;
	}
}

.load-bar-base {
	background-color: $link-color;
	float: left;
	height: 100%;
	overflow: hidden;
	width: 100%;
	@include animation(load-bar-right-in 1s $timing 1 forwards);
	@include transform(translate3d(-100%, 0, 0));
	-webkit-transform-origin: top right;
	        transform-origin: top right;
	.load-bar:first-child & {
		@include animation(load-bar-left-in 1s $timing 1 forwards);
		@include transform(translate3d(100%, 0, 0));
		-webkit-transform-origin: top left;
		        transform-origin: top left;
	}
}

// animation
	@-webkit-keyframes load-bar-left-in {
		0% {
			@include transform(translate(100%, 0));
			@include transform(translate3d(100%, 0, 0));
		}
		100% {
			@include transform(translate(0, 0));
			@include transform(translate3d(0, 0, 0));
		}
	}

	@keyframes load-bar-left-in {
		0% {
			@include transform(translate(100%, 0));
			@include transform(translate3d(100%, 0, 0));
		}
		100% {
			@include transform(translate(0, 0));
			@include transform(translate3d(0, 0, 0));
		}
	}

	@-webkit-keyframes load-bar-right-in {
		0% {
			@include transform(translate(-100%, 0));
			@include transform(translate3d(-100%, 0, 0));
		}
		100% {
			@include transform(translate(0, 0));
			@include transform(translate3d(0, 0, 0));
		}
	}

	@keyframes load-bar-right-in {
		0% {
			@include transform(translate(-100%, 0));
			@include transform(translate3d(-100%, 0, 0));
		}
		100% {
			@include transform(translate(0, 0));
			@include transform(translate3d(0, 0, 0));
		}
	}

.load-bar-content {
	float: left;
	height: 100%;
	position: relative;
	width: 400%;
	@include animation(load-bar-right 4s linear infinite forwards);
	-webkit-animation-delay: 1s;
	        animation-delay: 1s;
	-webkit-transform-origin: top center;
	        transform-origin: top center;
	.load-bar:first-child & {
		@include animation(load-bar-left 4s linear infinite forwards);
		-webkit-animation-delay: 1s;
		        animation-delay: 1s;
	}
}

// animation
	@-webkit-keyframes load-bar-left {
		0% {
			@include transform(translate(0, 0));
			@include transform(translate3d(0, 0, 0));
		}
		100% {
			@include transform(translate(-100%, 0));
			@include transform(translate3d(-100%, 0, 0));
		}
	}

	@keyframes load-bar-left {
		0% {
			@include transform(translate(0, 0));
			@include transform(translate3d(0, 0, 0));
		}
		100% {
			@include transform(translate(-100%, 0));
			@include transform(translate3d(-100%, 0, 0));
		}
	}

	@-webkit-keyframes load-bar-right {
		0% {
			@include transform(translate(-100%, 0));
			@include transform(translate3d(-100%, 0, 0));
		}
		100% {
			@include transform(translate(0, 0));
			@include transform(translate3d(0, 0, 0));
		}
	}

	@keyframes load-bar-right {
		0% {
			@include transform(translate(-100%, 0));
			@include transform(translate3d(-100%, 0, 0));
		}
		100% {
			@include transform(translate(0, 0));
			@include transform(translate3d(0, 0, 0));
		}
	}

.load-bar-progress {
	background-color: transparent;
	float: left;
	height: 100%;
	width: 25%;
}

// color
	@each $color in $palette-list {
		$i: index($palette-list, $color);
		
		.load-bar-progress-#{$color} {
			background-color: nth($palette-color, $i);
		}
	}

.progress {
	background-color: lighten($link-color, 30%);
	height: ($base / 2);
	margin-top: ($line-height - $base / 4);
	margin-bottom: ($line-height - $base / 4);
	overflow: hidden;
	position: relative;
}

.progress-bar {
	background-color: $link-color;
	border-radius: 0 1px 1px 0;
	height: 100%;
	position: absolute;
		top: 0;
		left: 0;
	@include transition(width 0.3s $timing);
}

// color
	@each $color in $palette-list {
		$i: index($palette-list, $color);
		
		.progress-#{$color} {
			background-color: nth($palette-color-light, $i);
			.progress-bar {
				background-color: nth($palette-color, $i);
			}
		}
	}

.progress-bar-indeterminate {
	background-color: $link-color;
	&:after,
	&:before {
		background-color: inherit;
		border-radius: 1px;
		content: '';
		display: block;
		position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
		will-change: left, right;
	}
	&:after {
		@include animation(pbar-indeterminate-one 3s cubic-bezier(0.6, 0.8, 0.6, 0.4) infinite);
	}
	&:before {
		@include animation(pbar-indeterminate-two 3s cubic-bezier(0.2, 0.8, 0.2, 0.8) infinite);
		-webkit-animation-delay: 1.5s;
		        animation-delay: 1.5s;
	}
}

// animation
	@-webkit-keyframes pbar-indeterminate-one {
		0% {
			// position
				right: 100%;
				left: -35%;
		}
		60% {
			// position
				right: -90%;
				left: 100%;
		}
		100% {
			// position
				right: -90%;
				left: 100%;
		}
	}

	@keyframes pbar-indeterminate-one {
		0% {
			// position
				right: 100%;
				left: -35%;
		}
		60% {
			// position
				right: -90%;
				left: 100%;
		}
		100% {
			// position
				right: -90%;
				left: 100%;
		}
	}

	@-webkit-keyframes pbar-indeterminate-two {
		0% {
			// position
				right: 100%;
				left: -150%;
		}
		60% {
			// position
				right: -35%;
				left: 135%;
		}
		100% {
			// position
				right: -35%;
				left: 135%;
		}
	}

	@keyframes pbar-indeterminate-two {
		0% {
			// position
				right: 100%;
				left: -150%;
		}
		60% {
			// position
				right: -35%;
				left: 135%;
		}
		100% {
			// position
				right: -35%;
				left: 135%;
		}
	}

.progress-circular {
	height: ($line-height * 2);
	margin-top: $line-height;
	margin-bottom: $line-height;
	overflow: hidden;
	position: relative;
	width: ($line-height * 2);
}

.progress-circular-center {
	margin-right: auto;
	margin-left: auto;
}

.progress-circular-inline {
	display: inline-block;
	margin-right: $grid-gutter;
	margin-left: $grid-gutter;
}

.progress-circular-inner {
	height: ($line-height * 2);
	position: relative;
	width: ($line-height * 2);
	@include animation(cbar-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite);
}

.progress-circular-left,
.progress-circular-right {
	height: ($line-height * 2);
	overflow: hidden;
	position: absolute;
		top: 0;
	width: $line-height;
}

.progress-circular-left {
	// position
		left: 0;
}

.progress-circular-right {
	// position
		right: 0;
}

.progress-circular-spinner {
	border: ($base / 2) solid $link-color;
	border-bottom-color: transparent;
	border-radius: 50%;
	height: ($line-height * 2);
	position: absolute;
		top: 0;
	width: ($line-height * 2);
	.progress-circular-left & {
		border-right-color: transparent;
		// position
			left: 0;
		@include animation(cbar-spinner-left 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite);
	}
	.progress-circular-right & {
		border-left-color: transparent;
		// position
			right: 0;
		@include animation(cbar-spinner-right 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite);
	}
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);

		.progress-circular-spinner-#{$color} {
			border-top-color: nth($palette-color, $i);
			.progress-circular-left & {
				border-left-color: nth($palette-color, $i);
			}
			.progress-circular-right & {
				border-right-color: nth($palette-color, $i);
			}
		}
	}

.progress-circular-wrapper {
	@include animation(cbar-wrapper-rotate 2.91667s linear infinite);
}

// animation
	@-webkit-keyframes cbar-inner-rotate {
		12.5% {
			@include transform(rotate(135deg));
		}
		25% {
			@include transform(rotate(270deg));
		}
		37.5% {
			@include transform(rotate(405deg));
		}
		50% {
			@include transform(rotate(540deg));
		}
		62.5% {
			@include transform(rotate(675deg));
		}
		75% {
			@include transform(rotate(810deg));
		}
		87.5% {
			@include transform(rotate(945deg));
		}
		100% {
			@include transform(rotate(1080deg));
		}
	}

	@keyframes cbar-inner-rotate {
		12.5% {
			@include transform(rotate(135deg));
		}
		25% {
			@include transform(rotate(270deg));
		}
		37.5% {
			@include transform(rotate(405deg));
		}
		50% {
			@include transform(rotate(540deg));
		}
		62.5% {
			@include transform(rotate(675deg));
		}
		75% {
			@include transform(rotate(810deg));
		}
		87.5% {
			@include transform(rotate(945deg));
		}
		100% {
			@include transform(rotate(1080deg));
		}
	}

	@-webkit-keyframes cbar-spinner-left {
		0%,
		100% {
			@include transform(rotate(130deg));
		}
		50% {
			@include transform(rotate(-5deg));
		}
	}

	@keyframes cbar-spinner-left {
		0%,
		100% {
			@include transform(rotate(130deg));
		}
		50% {
			@include transform(rotate(-5deg));
		}
	}

	@-webkit-keyframes cbar-spinner-right {
		0%,
		100% {
			@include transform(rotate(-130deg));
		}
		50% {
			@include transform(rotate(5deg));
		}
	}

	@keyframes cbar-spinner-right {
		0%,
		100% {
			@include transform(rotate(-130deg));
		}
		50% {
			@include transform(rotate(5deg));
		}
	}

	@-webkit-keyframes cbar-wrapper-rotate {
		100% {
			@include transform(rotate(360deg));
		}
	}

	@keyframes cbar-wrapper-rotate {
		100% {
			@include transform(rotate(360deg));
		}
	}

.progress-position-absolute-bottom,
.progress-position-absolute-top,
.progress-position-fixed-bottom,
.progress-position-fixed-top {
	margin: 0;
	// position
		left: 0;
	width: 100%;
}

.progress-position-absolute-bottom,
.progress-position-absolute-top {
	position: absolute;
}

.progress-position-absolute-bottom,
.progress-position-fixed-bottom {
	// position
		bottom: 0;
}

.progress-position-absolute-top,
.progress-position-fixed-top {
	// position
		top: 0;
}

.progress-position-fixed-top,
.progress-position-fixed-bottom {
	position: fixed;
}