vps交流

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


本帖最后由 我心飞呀飞 于 2024-8-18 16:55 编辑

效果
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;
}

是转圈圈的动画吗
这个也不是进度条吧,loading

张曼玉 发表于 2024-8-18 16:49
是转圈圈的动画吗

正在删除的框的上面有一个彩色的块
微软官网的一个进度条效果  挺优雅的

tomcb 发表于 2024-8-18 16:53
这个也不是进度条吧,loading

差不多意思,就是这个东西

赞(0)
版权声明:本贴采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
帖子名称:《微软官网的一个进度条效果 挺优雅的》
帖子链接:https://bbs.toot.su/189974.html