1、html结构：
0%
简单分析下：
div.loadBar代表整个进度条
div.loadBar div 设置了圆角表框 ，div.loadBar div span 为进度 (动态改变宽度)， div.loadBar div span i 为进度填充背景色（即width=100%）
HTML的结构，大家可以自己设计，只要合理，都没有问题~
2、CSS：
body
{
font-family: Thoma, Microsoft YaHei, ‘Lato’, Calibri, Arial, sans-serif;
}
#content
{
margin: 120px auto;
width: 80%;
}
.loadBar
{
width: 600px;
height: 30px;
border: 3px solid #212121;
border-radius: 20px;
position: relative;
}
.loadBar div
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.loadBar div span, .loadBar div i
{
box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .4);
width: 0%;
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
}
.loadBar div i
{
width: 100%;
-webkit-animation: move .8s linear infinite;
background: -webkit-linear-gradient(left top, #7ed047 0%, #7ed047 25%, #4ea018 25%, #4ea018 50%, #7ed047 50%, #7ed047 75%, #4ea018 75%, #4ea018 100%);
background-size: 40px 40px;
}
.loadBar .percentNum
{
position: absolute;
top: 100%;
right: 10%;
padding: 1px 15px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
border: 1px solid #222;
background-color: #222;
color: #fff;
}
@-webkit-keyframes move
{
0%
{
background-position: 0 0;
}
100%
{
background-position: 40px 0;
}
}
此时效果为：
整体布局就是利用position relative和absolute~
比较难的地方就是，渐变条的实现：
我们采用
a、从左上到右下的渐变
b、颜色分别为：0-25% 为#7ed047 ， 25%-50% 为#4ea018 ， 50%-75%为#7ed047 ， 75%-100%为#4ea018
c、背景的大小为40px 40px 这个设置超过高度就行， 越大，条文宽度越宽
分析图：
设置的原理就是上图了，同时可以背景宽度设置越大，条文宽度越大；
3、设置Js，创建LoadBar对象
function LoadingBar(id)
{
this.loadbar = $(“#” + id);
this.percentEle = $(“.percent”, this.loadbar);
this.percentNumEle = $(“.percentNum”, this.loadbar);
最后
文章不易，如果大家喜欢这篇文章，或者对你有帮助希望大家多多点赞转发关注哦。文章会持续更新的。绝对干货！！！
- Android进阶学习全套手册
关于实战，我想每一个做开发的都有话要说，对于小白而言，缺乏实战经验是通病，那么除了在实际工作过程当中，我们如何去更了解实战方面的内容呢？实际上，我们很有必要去看一些实战相关的电子书。目前，我手头上整理到的电子书还算比较全面，HTTP、自定义view、c++、MVP、Android源码设计模式、Android开发艺术探索、Java并发编程的艺术、Android基于Glide的二次封装、Android内存优化——常见内存泄露及优化方案、.Java编程思想 （第4版）等高级技术都囊括其中。
-
Android高级架构师进阶知识体系图
关于视频这块，我也是自己搜集了一些，都按照Android学习路线做了一个分类。按照Android学习路线一共有八个模块，其中视频都有对应，就是为了帮助大家系统的学习。接下来看一下导图和对应系统视频吧！！！
-
Android对标阿里P7学习视频
-
BATJ大厂Android高频面试题
这个题库内容是比较多的，除了一些流行的热门技术面试题，如Kotlin，数据库，Java虚拟机面试题，数组，Framework ，混合跨平台开发，等
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
[外链图片转存中…(img-WvCrTcYH-1715145111900)] -
BATJ大厂Android高频面试题
这个题库内容是比较多的，除了一些流行的热门技术面试题，如Kotlin，数据库，Java虚拟机面试题，数组，Framework ，混合跨平台开发，等
[外链图片转存中…(img-uFbxzxKr-1715145111901)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
