css实现进度加载动画

最新推荐文章于 2024-08-28 21:26:11 发布

qq_39782626

最新推荐文章于 2024-08-28 21:26:11 发布

阅读量380

点赞数

分类专栏： css 文章标签： css实现加载动画

本文链接：https://blog.csdn.net/qq_39782626/article/details/77333904

版权

这篇博客演示了如何使用CSS来实现一个加载进度动画。通过创建一个圆形div，并结合CSS关键帧动画，实现了两个内切小圆从左到右的旋转效果，形成连续的加载动画。博客提供了一个实例，展示如何定义动画时间和样式，并通过JavaScript控制动画的执行。

摘要由CSDN通过智能技术生成

    <!doctype html>  
    <html>  
    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport"  
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
        <meta http-equiv="X-UA-Compatible" content="ie=edge">  
        <title>Document</title>  
        <style>  
      
            #circle{  
                position: absolute;  
                left:45%;  
                top:200px;  
            }  
      
        </style>  
    </head>  
    <body>  
        <div id="circle">  
        </div>  
    </body>  
    <script>  
        function Loading(setting) {  
            this.settings ={  
                animationTime:5,//动画执行时间  
                divId:"circle",//div盒子的id  
                divWidth:"200px",//盒子的宽度  
                divHeight:"200px", // 盒子的高度  
                divClassName: "active", //添加class名字后就会执行加载动画  
                leftDivName:"left", //第一个盒子的class名字  
                rightDivName:"right", //内部第二个盒子的class名字  
                infinite:true, // 是否循环  
                loadingWidth:"10px", //圆圈宽度  
                loadingColor:"#000" //圆圈的颜色  
      
            };  
      
            this.timeOut = null; //延迟器  
      
            if(setting){  
                for(var i