微软官网的一个进度条效果 挺优雅的
效果
https://tapewithadblock.org/v/ko2r2z76a2hDYL/%E5%B1%8F%E5%B9%95%E5%BD%95%E5%88%B6_2024-08-18_161932.mp4
显示的位置
microsoft官网,登录,Microsoft 帐户,设备,删除设备就会弹出。
正在删除的框的上面有一个彩色的块
挺优雅的效果
研究了一下
容器包裹动画效果
.itemProgress-483 {
position: relative;
overflow: hidden;
height: 2px;
padding: 0px;
}
动画背景,灰色
.progressTrack-484 {
position: absolute;
width: 100%;
height: 2px;
background-color: rgb(222, 222, 222);
}
动画核心滚动的块
.progressBar-485 {
height: 2px;
position: absolute;
transition: width 0.3s;
width: 0px;
min-width: 33%;
background: linear-gradient(to right, rgb(222, 222, 222) 0%, rgb(0, 111, 201) 50%, rgb(222, 222, 222) 100%);
animation: 3s ease 0s infinite normal none running css-479;
}
https://tapewithadblock.org/v/ko2r2z76a2hDYL/%E5%B1%8F%E5%B9%95%E5%BD%95%E5%88%B6_2024-08-18_161932.mp4
显示的位置
microsoft官网,登录,Microsoft 帐户,设备,删除设备就会弹出。
正在删除的框的上面有一个彩色的块
挺优雅的效果
研究了一下
容器包裹动画效果
.itemProgress-483 {
position: relative;
overflow: hidden;
height: 2px;
padding: 0px;
}
动画背景,灰色
.progressTrack-484 {
position: absolute;
width: 100%;
height: 2px;
background-color: rgb(222, 222, 222);
}
动画核心滚动的块
.progressBar-485 {
height: 2px;
position: absolute;
transition: width 0.3s;
width: 0px;
min-width: 33%;
background: linear-gradient(to right, rgb(222, 222, 222) 0%, rgb(0, 111, 201) 50%, rgb(222, 222, 222) 100%);
animation: 3s ease 0s infinite normal none running css-479;
}