62 lines
1.5 KiB
SCSS
62 lines
1.5 KiB
SCSS
// Copyright 2024 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
@use '../variables';
|
|
|
|
.ProgressBar {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: rgba(variables.$color-ultramarine, 0.2);
|
|
height: 5px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.ProgressBar__fill {
|
|
position: absolute;
|
|
background-color: variables.$color-ultramarine;
|
|
border-radius: 2px;
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
transition: transform 0.2s;
|
|
// stylelint-disable-next-line liberty/use-logical-spec
|
|
left: 0;
|
|
|
|
--spinning-bar-width-fraction: 0.36;
|
|
|
|
@keyframes progress-bar-spinning-rtl {
|
|
from {
|
|
// stylelint-disable-next-line declaration-property-value-disallowed-list
|
|
transform: translateX(
|
|
calc(100% * (1 / var(--spinning-bar-width-fraction)))
|
|
);
|
|
}
|
|
to {
|
|
// stylelint-disable-next-line declaration-property-value-disallowed-list
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
@keyframes progress-bar-spinning {
|
|
from {
|
|
// stylelint-disable-next-line declaration-property-value-disallowed-list
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
// stylelint-disable-next-line declaration-property-value-disallowed-list
|
|
transform: translateX(
|
|
calc(100% * (1 / var(--spinning-bar-width-fraction)))
|
|
);
|
|
}
|
|
}
|
|
|
|
&--spinning {
|
|
width: calc(var(--spinning-bar-width-fraction) * 100%);
|
|
&:dir(rtl) {
|
|
animation: progress-bar-spinning-rtl 2s ease-in-out infinite;
|
|
}
|
|
&:dir(ltr) {
|
|
animation: progress-bar-spinning 2s ease-in-out infinite;
|
|
}
|
|
}
|
|
}
|