后端程序员的前端修炼01~纯html+css搞定简单进度条
后端程序员的前端修炼01~纯html+css搞定简单进度条
JFinal-小木 发表于2周前
后端程序员的前端修炼01~纯html+css搞定简单进度条
  • 发表于 2周前
  • 阅读 17
  • 收藏 0
  • 点赞 0
  • 评论 2

移动开发云端新模式探索实践 >>>   

摘要: 程序员能轻松应对前端吗?

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

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

image.png

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

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

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

image.png

 

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

image.png

 

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

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 195
博文 40
码字总数 24713
评论 (2)
JFinal
十分简洁的实现,可以再推广为动态变动的效果,用 js 控制一下 inner 的 width 值就可以了
JFinal-小木

引用来自“JFinal”的评论

十分简洁的实现,可以再推广为动态变动的效果,用 js 控制一下 inner 的 width 值就可以了

是滴,js控制数值就可以做成动态的了
×
JFinal-小木
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: