mirror of
https://github.com/danog/sass-site.git
synced 2024-12-12 17:37:36 +01:00
50 lines
1.2 KiB
SCSS
50 lines
1.2 KiB
SCSS
$progress-block-count: 8;
|
|
$progress-block-size: $font-unit;
|
|
|
|
// without the 's' for seconds...
|
|
$progress-block-animation-duration: 1;
|
|
|
|
$progress-block-delay-interval: 1 / $progress-block-count;
|
|
|
|
|
|
|
|
.progress {
|
|
@include stretch;
|
|
@include square(100%);
|
|
}
|
|
|
|
.progress-wrap { @extend %table-layout; }
|
|
|
|
.progress-center {
|
|
@extend %table-layout-cell;
|
|
text-align: center;
|
|
}
|
|
|
|
.progress-bar {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: $progress-block-count * $progress-block-size;
|
|
height: $progress-block-size;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.progress-block {
|
|
@include animation-name(progress-block);
|
|
@include animation-duration(#{$progress-block-animation-duration}s);
|
|
@include animation-iteration-count;
|
|
@include animation-direction;
|
|
@include square($progress-block-size);
|
|
position: absolute;
|
|
top: 0;
|
|
background: $color-primary;
|
|
}
|
|
|
|
@for $i from 1 through $progress-block-count {
|
|
.progress-block:nth-child(#{$i}) {
|
|
@include animation-delay(#{$progress-block-delay-interval * ($i - 1) * $progress-block-animation-duration}s);
|
|
left: $progress-block-size * ($i - 1);
|
|
}
|
|
}
|
|
|
|
@include keyframes(progress-block, background-color, $color-primary, transparent);
|