可控制的百分比动画进度条

一款可控制的百分比动画进度条，页面中间进度条的进度，可通过点击右下角的控制开关来控制播放、暂停、快进或快退、进度加载的快慢等，控制区域的功能还是比较完善的。

分类：css3 > 进度条难易：初级

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

页面的head部分，需对接谷歌的字体，并引入本地样式文件，代码如下：

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好进度条的div容器，代码如下：

<div class="container">
   <div class="progress-bar"></div>
</div>

页面的底部，需远程调用几个必需的JS文件，并引入本地JS文件，代码如下：

<script src='https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/just-animate/2.1.2/just-animate.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/just-animate/2.1.2/just-animate-web.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/just-animate/2.1.2/just-animate-extras.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/just-animate/2.1.2/just-animate-tools.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>