在微信输入法中，按钮会出现一个逐渐填满的进度条效果。这个效果可以通过 css 的 linear-gradient、background-position 和 background-clip 属性实现。
css 代码：
.progress-btn {
width: 200px;
height: 40px;
background: linear-gradient(to right, #ccc 0%, #333 100% 100%);
background-position: 0 0;
background-clip: border-box;
transition: background-position 1s linear;
}
.progress-btn.active {
background-position: 100% 0;
}功能说明：
立即学习“前端免费学习笔记（深入）”；
- linear-gradient 创建一个从灰色到黑色渐变的背景。
- background-position 在水平方向移动渐变位置，从而产生进度条填满的效果。
- background-clip 将渐变限制在按钮边框内。
- 在 .active 状态下，background-position 移动到 100%，表示进度条已完成。
兼容性：
需要注意的是，此方法的兼容性可能不是很好，特别是在较旧的浏览器中。以下浏览器支持该实现：
- chrome（版本 57 及以上）
- firefox（版本 52 及以上）
- edge（版本 16 及以上）
- safari（版本 10 及以上）
