Angular Material buffer模式进度条如何设置动画左到右或关闭

Angular Material的mat-progress-bar在buffer模式下没有公开的官方配置项用来调整缓冲条纹的动画方向、或者直接关闭动画，你可以通过CSS覆盖默认样式实现需求，不需要修改组件源码。

方案1：直接关闭缓冲流动动画 #

1. 给进度条组件添加自定义类名，避免样式影响页面内其他进度条
2. 编写覆盖样式（注意样式需要写在全局样式文件，或者使用::ng-deep穿透Angular的组件样式隔离）

对应模板代码：

<mat-progress-bar
  class="disable-buffer-animation"
  mode="buffer"
  value="87"
  [bufferValue]="100"
  style="width: 100%"
></mat-progress-bar>

注意：你原有代码里[bufferValue]="100 - 87"的写法有误，bufferValue代表已缓冲完成的总进度值，不是剩余未缓冲的差值，如果你已经缓冲到100%直接传100即可，缓冲到多少就传对应数值。

对应覆盖样式：

.disable-buffer-animation .mat-progress-bar-buffer {
  animation: none !important;
}

方案2：将动画调整为从左向右流动 #

同样通过自定义类+重写动画关键帧实现，覆盖原有反向移动的动画逻辑：

/* 给进度条加上ltr-buffer-animation类即可生效 */
.ltr-buffer-animation .mat-progress-bar-buffer {
  animation: custom-buffer-ltr 250ms linear infinite !important;
}

@keyframes custom-buffer-ltr {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 10px 0;
  }
}

这个关键帧的位移值和Angular Material默认的条纹宽度匹配，动画衔接不会出现断层。

内容的提问来源于stack exchange，提问作者Oytun Tur