talos
1// Disable animation if transitions are disabled
2@if $enable-transitions {
3@keyframes progress-bar-stripes {
4from { background-position: $progress-height 0; }
5to { background-position: 0 0; }
6}
7}
8
9.progress {
10display: flex;
11height: $progress-height;
12overflow: hidden; // force rounded corners by cropping it
13line-height: 0;
14@include font-size($progress-font-size);
15background-color: $progress-bg;
16@include border-radius($progress-border-radius);
17@include box-shadow($progress-box-shadow);
18}
19
20.progress-bar {
21display: flex;
22flex-direction: column;
23justify-content: center;
24overflow: hidden;
25color: $progress-bar-color;
26text-align: center;
27white-space: nowrap;
28background-color: $progress-bar-bg;
29@include transition($progress-bar-transition);
30}
31
32.progress-bar-striped {
33@include gradient-striped();
34background-size: $progress-height $progress-height;
35}
36
37@if $enable-transitions {
38.progress-bar-animated {
39animation: $progress-bar-animation-timing progress-bar-stripes;
40
41@if $enable-prefers-reduced-motion-media-query {
42@media (prefers-reduced-motion: reduce) {
43animation: none;
44}
45}
46}
47}
48