No notes defined.
<!-- Default -->
<div class="progress">
<span class="progress-value" style="transform: scaleX(0.25);"></span>
<progress value="0.25"></progress>
</div>
<!-- Pending -->
<div class="progress is-pending">
<span class="progress-value" style=""></span>
<progress></progress>
</div>
<!-- Timer -->
<div class="progress is-timer">
<span class="progress-value" style="animation-duration: 7500ms;"></span>
<progress></progress>
</div>
<div class="progress{{#if duration}} is-timer{{/if}}{{#if is-pending}} is-pending{{/if}}">
<span class="progress-value" style="{{#value}}transform: scaleX({{.}});{{/value}}{{#duration}}animation-duration: {{.}};{{/duration}}"></span>
<progress{{#value}} value="{{.}}"{{/value}}></progress>
</div>
/* Default */
{
"value": 0.25
}
/* Pending */
{
"value": null,
"is-pending": true,
"duration": null
}
/* Timer */
{
"value": null,
"duration": "7500ms"
}
$progress_backdrop-color: $_gray-200 !default;
$progress_color: $_text-color !default;
$progress_height: $_border-width--large !default;
@import "_progress.settings";
@import "_progress.styles";
$progress_height: 8px !default;
$progress_color: $_action-background-color !default;
$progress_backdrop-color: $_backdrop-color !default;
$progress_pending_duration: 1500ms !default;
@keyframes progress-timer {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
@keyframes progress-pending {
0% {
transform: scaleX(.1);
transform-origin: bottom left;
}
25% {
transform-origin: bottom left;
}
50% {
transform: scaleX(.4);
}
75% {
transform-origin: bottom right;
}
100% {
transform: scaleX(.1);
transform-origin: bottom right;
}
}
%progress {
@include stack-spacing();
height: $progress_height;
position: relative;
background-color: $progress_backdrop-color;
&-value {
display: block;
height: $progress_height;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: $progress_color;
transform: inherit;
transform-origin: bottom left;
transition: transform 100ms;
}
progress {
@extend %visually-hidden;
}
.is-timer &-value {
transform-origin: bottom right;
animation-name: progress-timer;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
}
%progress--pending {
}
%progress-value--pending {
animation: progress-pending $progress_pending_duration infinite alternate ease-in-out;
}
.progress {
@extend %progress;
&-value {
@extend %progress-value;
}
&.is-pending {
@extend %progress--pending !optional;
}
&.is-pending &-value {
@extend %progress-value--pending;
}
}