Java基础、中级、高级、架构面试资料

jQuery+CSS3实现带阴影的3D进度条插件

HTML5 herman 2202浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog2,发送下载链接帮助你免费下载!
本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领
腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云

3D 进度条看起来很有空间感。比起平面进度条,3D 进度条更能带来好的用户体验和炫酷的加载效果。本文将借助 jQueryCSS3 来实现一款带有阴影的 3D 进度条插件。

下面我们先看看效果。

jQuery/CSS3带阴影的3D进度条插件

该进度条插件非常炫酷,基于 jQuery/CSS3 实现,这款进度条插件的特点是带有阴影,外观看起来有着3D立体的视觉效果。另外进度条实体部分可以利用 CSS3 相关特性绘制任意效果的填充物,可以是渐变颜色,也可以是网格形状,同时我们可以动态设置进度条的当前值。

下面介绍它的用法,首先是html代码:

<div class="progress-factor flexy-item">
    <div class="progress-bar">
        <div class="bar has-rotation has-colors navy ruler" role="progressbar" 
        aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" id="bar-0_0">
            <div class="tooltip white"></div>
            <div class="bar-face face-position roof percentage"></div>
            <div class="bar-face face-position back percentage"></div>
            <div class="bar-face face-position floor percentage volume-lights"></div>
            <div class="bar-face face-position left"></div>
            <div class="bar-face face-position right"></div>
            <div class="bar-face face-position front percentage volume-lights shine"></div>
        </div>
    </div>
</div>

最后引入该插件的 component.css 和 custom-bars.css 即可。别忘了 jQuery 的引入哦。本实例代码已共享到了百度网盘,链接:http://pan.baidu.com/s/1dFrQqFv 密码:z3hc

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号:xttblog2。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

本文原文出处:业余草: » jQuery+CSS3实现带阴影的3D进度条插件