程序员前端001~极简进度条设计实现原理

  • • 发表于 5个月前
  • • 作者 小木
  • • 887 次浏览
  • • 0 条评论
  • • 最后编辑时间 5个月前
  • • 来自 [技 术]

在很多项目中我们前端页面(也包括小程序)要用到行内的进度条展示一些数据百分比和进度之类的样式。

例如下图:订单的时段分析

我们想使用更直观的方式去体现比例值或者进度,那么在不用js组件的情况下,我们是如何用两个span标签加上几行css搞定的呢?

程序员做前端很容易,进度条这种组件,简单的就是两个分层而已,一层颜色显示总体长度,上层颜色显示当前进度比例值,颜色一区分,效果就出来了。

先看看代码,第一层class=“percent”是一个长度为100px的span 给一个底色

再看上层的绿色进度部分 class=”inner” 长度是一个不确定的值 比例是多少 长度就是多少 这样就能体现出百分比效果了。

按照这样的思路 各位可以实现自己的简单进度显示了,如果想要更高级,可以配合css3动画或者js 进行升级,程序员轻松应对前端,很easy!;

转载文章 阅读原文

分享到:
评论区(共0条评论)
0条评论
Ctrl+Enter
作者

小木

小木

APP:1 帖子:35 回复:433 积分:1390

已加入社区[720]天

JFinal资深讲师、JBolt作者

作者详情》
Top