粘性百分比加载动画【原创】

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好百分比区块和设置按钮等内容，代码如下：

<div class="container"></div>
<div class="top-layer"></div>

<!-- UI layer -->
<div class="ui">
  <h1>粘性百分比加载</h1>
  <h3>可调整等份数和区块色彩</h3>
  <div class="controls">
    <p class="more"></p>
    <p class="atoms-pop">4</p>
    <p class="less"></p>
    <p class="rainbao">给点颜色瞧瞧</p>
  </div>
</div>

页面的底部，需引入jQuery库和本地JS文件，代码如下：

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>