jquery animate实现动态进度条

最新推荐文章于 2021-08-04 06:43:52 发布

含笑一过

最新推荐文章于 2021-08-04 06:43:52 发布

阅读量4.5k

点赞数 1

分类专栏：前端文章标签：动态进度条

本文链接：https://blog.csdn.net/u013630488/article/details/50681618

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

                            jquery animate实现动态进度条

<!DOCTYPE html>
<html>
    <head>
        <title>临时停车</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="" />
        <meta http-equiv="Cache-Control" content="no-transform" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
        <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
        <style type="text/css">
        body{margin:0;padding: 0;}
        .main{width:100%;margin:0 auto;}
        .pro{width:90%;margin:10px 5%;height: 20px;background: #ccc;border-radius: 10px;overflow: hidden;}
        .pro_bg{background: red;height: 20px;width:0;}
        </style>
    </head>
    <body>
        <div class="main">
            <div class="pro">
                <div class="pro_bg"></div>
            </div>
        </div>
    <script type="text/javascript">
    $(function(){
        $(".pro_bg").animate({
            width:"30%"
        },1000);
    });
    </script>
    </body> 
</html>

含笑一过

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery animate实现动态进度条

jquery animate实现动态进度条<!DOCTYPE html><html> <head> <title>临时停车</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" conten
复制链接

扫一扫