微软官网的一个进度条效果 挺优雅的

Alvis

效果
https://tapewithadblock.org/v/ko ... 24-08-18_161932.mp4

显示的位置
microsoft官网，登录，Microsoft 帐户，设备，删除设备就会弹出。
挺优雅的效果


研究了一下

1. 容器包裹动画效果
   
2. .itemProgress-483 {
   
3.     position: relative;
   
4.     overflow: hidden;
   
5.     height: 2px;
   
6.     padding: 0px;
   
7. }
   
8. 
   
9. 动画背景，灰色
   
10. .progressTrack-484 {
    
11.     position: absolute;
    
12.     width: 100%;
    
13.     height: 2px;
    
14.     background-color: rgb(222, 222, 222);
    
15. }
    
16. 
    
17. 动画核心滚动的块
    
18. .progressBar-485 {
    
19.     height: 2px;
    
20.     position: absolute;
    
21.     transition: width 0.3s;
    
22.     width: 0px;
    
23.     min-width: 33%;
    
24.     background: linear-gradient(to right, rgb(222, 222, 222) 0%, rgb(0, 111, 201) 50%, rgb(222, 222, 222) 100%);
    
25.     animation: 3s ease 0s infinite normal none running css-479;
    
26. }
    

复制代码

DigitalVirt

你说最顶上的那个动画？

相关的 css css-479 你没有复制。