角度材料进度杆缓冲区动画从左到右

发布于 2025-02-07 05:02:35 字数 243 浏览 3 评论 0原文

嗨，我想用缓冲动画制作一个进度栏的功能

我尝试这样

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

原文

hi i want to make a progress bar with buffer animation but the animation is reversed it goes right to left i want it to go left to right or no animation at all i looked through progress bar api but couldnt find anything does angular material progress bar have a such feature

i am trying like this

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

单调的奢华 2025-02-14 05:02:36

如果您希望使用左至右的缓冲区动画进行进度栏，请向其添加以下CSS属性。

::ng-deep .mat-progress-bar .mat-progress-bar-background{
    animation-direction: reverse !important;
}

如果您不想要动画，请将动画的流行音乐更改为无。

::ng-deep .mat-progress-bar .mat-progress-bar-background{
    animation: none !important;
}

以下图像正在测试您的代码证据，这些证据是在Stackblitz中测试的。

If you want your progress bar with buffer animation which go left to right, add the following CSS property to it.

::ng-deep .mat-progress-bar .mat-progress-bar-background{
    animation-direction: reverse !important;
}

If you want no animation, change animation's poperty to none.

::ng-deep .mat-progress-bar .mat-progress-bar-background{
    animation: none !important;
}

The following images are testing evidence for your code which are test in StackBlitz.

回复收藏 0 原文

想你的星星会说话 2025-02-14 05:02:36

如果我们旋转progressbar 180度？

  <mat-progress-bar
    mode="buffer"
    value="87"
    [bufferValue]="100 - 87"
    style="width: 100%;"
    style="width: 100%; transform: rotate(180deg);"
  ></mat-progress-bar>

How if we rotate the progressbar 180 degree ?

  <mat-progress-bar
    mode="buffer"
    value="87"
    [bufferValue]="100 - 87"
    style="width: 100%;"
    style="width: 100%; transform: rotate(180deg);"
  ></mat-progress-bar>

回复收藏 0 原文

~没有更多了~