Sha256: 168c4d4ed8021d8199154ffa1c3db5f4284aa955450f0613422927f132592cb1
Contents?: true
Size: 1.67 KB
Versions: 5
Compression:
Stored size: 1.67 KB
Contents
.load-bar {
float: right;
height: 100%;
overflow: hidden;
width: 50%;
&:first-child {
float: left;
}
}
.load-bar-base {
animation: load-bar-right-in 0.9s $timing 1 forwards;
background-color: $brand-color-accent;
float: left;
height: 100%;
overflow: hidden;
transform: translate(-100%, 0);
transform-origin: top right;
width: 100%;
will-change: transform;
.load-bar:first-child & {
animation: load-bar-left-in 0.9s $timing 1 forwards;
transform: translate(100%, 0);
transform-origin: top left;
}
}
// animation
@keyframes load-bar-left-in {
0% {
transform: translate(100%, 0);
}
100% {
transform: translate(0, 0);
}
}
@keyframes load-bar-right-in {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0, 0);
}
}
.load-bar-content {
animation: load-bar-right 3.6s linear infinite forwards;
animation-delay: 0.9s;
float: left;
height: 100%;
position: relative;
transform-origin: top center;
width: 400%;
will-change: transform;
.load-bar:first-child & {
animation: load-bar-left 3.6s linear infinite forwards;
animation-delay: 0.9s;
}
}
// animation
@keyframes load-bar-left {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
@keyframes load-bar-right {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0, 0);
}
}
.load-bar-progress {
background-color: transparent;
float: left;
height: 100%;
width: 25%;
}
// colour
@each $color in $palette-list-class {
$i: index($palette-list-class, $color);
@if $color != "brand-accent" {
.load-bar-progress-#{$color} {
background-color: nth($palette-list-color, $i);
}
}
}
Version data entries
5 entries across 5 versions & 1 rubygems