Contents

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

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

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

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

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

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

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

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

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

		.load-bar-progress-#{$color} {
			background-color: nth($palette-color, $i);
		}
	}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
material-sass-0.0.4	app/assets/stylesheets/material/element/_progress-loadbar.scss