CSS3 圆形loading效果

最新推荐文章于 2024-07-18 15:37:29 发布

浅陌游离

最新推荐文章于 2024-07-18 15:37:29 发布

阅读量899

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/xiaocie3456/article/details/49638009

学习笔记专栏收录该内容

25 篇文章

订阅专栏

本文展示了如何使用HTML、CSS和JavaScript实现一个加载效果，并提供了相应的代码实现。通过动态改变样式和背景图片，模拟加载过程，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图预览

贴代码

<!DOCTYPE html>
<html lang="zh-cn" class="ui-body-bg">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1,maximum-scale=1"/>
    <meta name="robots" content="noindex, nofollow">
    <title>loading</title>
</head>
<body>
  <style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    .progress-radial {
      display: inline-block;
      margin: 15px;
      position: relative;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
      padding: 10px;
      transition:all .3s linear;
      -webkit-transition:all .3s linear;
    }

    .progress-radial:before{
        content: '';
        border-radius: 50%;
        width: 10px;
        height: 10px;
        margin-left: -5px;
        top: 0;
        left: 50%;
        position: absolute;
        background-color: #EA8E00;
        z-index: 999;
    }

    .progress-radial-block{
        border-radius: 50%;
        width: 10px;
        height: 10px;
        margin-top: -5px;
        margin-left: -5px;
        top: 50%;
        left: 50%;
        position: absolute;
        background-color: #EA8E00;
        z-index: 999;
        transform: rotate(0deg) translate(0, -95px);
        -webkit-transform: rotate(0deg) translate(0, -95px);
    }

    .progress-center{
        color: #fff;
        width: 100%;
        height: 100%;
        background-color: #D03232;
        border-radius: 50%;
        text-align: center;
        line-height: 180px;
    }
  </style>

  <div id="progress1" class="progress-radial">
    <div class="progress-center">1%</div>
    <div class="progress-radial-block"></div>
  </div>

  <div id="progress2" class="progress-radial">
    <div class="progress-center">1%</div>
    <div class="progress-radial-block"></div>
  </div>
        
</body>
</html>

<script>

    (function(){
        function getCss(num){
            if(num <= 180){
                num = Math.max(0, Math.min(180, num)) + 90;
                return 'linear-gradient(90deg, #fff 50%, transparent 50%, transparent), linear-gradient(' + num + 'deg, #EA8E00 50%, #fff 50%, #fff)';
            }else{
                num = Math.max(180, Math.min(360, num)) - 270;
                return 'linear-gradient(' + num + 'deg, #EA8E00 50%, transparent 50%, transparent), linear-gradient(270deg, #EA8E00 50%, #fff 50%, #fff)';
            }

        }

        function progressUp($target, num, speed){
            var time = $target.time || 0;
            requestAnimFrame(function(){
                if(time < num){
                    time += speed;
                    $target.style['background-image'] = getCss(time * 3.6);
                    $target.querySelector('.progress-radial-block').style['transform'] = 'rotate(' + time * 3.6 + 'deg) translate(0, -95px)';
                    $target.querySelector('.progress-center').innerHTML = Math.min(time, num) + '%';
                    $target.time = time;
                    progressUp($target, num, speed);
                }else{
                    time = num;
                    $target.querySelector('.progress-center').innerHTML = time + '%';
                }
            });
        }

        function progressDown($target, num, speed){
            var time = $target.time || 0;
            requestAnimFrame(function(){
                if(time > num){
                    time -= speed;
                    $target.style['background-image'] = getCss(time * 3.6);
                    $target.querySelector('.progress-radial-block').style['transform'] = 'rotate(' + time * 3.6 + 'deg) translate(0, -95px)';
                    $target.querySelector('.progress-center').innerHTML = Math.max(time, num) + '%';
                    $target.time = time;
                    progressDown($target, num, speed);
                }else{
                    time = num;
                    $target.querySelector('.progress-center').innerHTML = time + '%';
                }
            });
        }

        function progressing($target, num, speed){
            var time = $target.time || 0;
            speed = speed || 1;

            if(time < num){
                progressUp($target, num, speed);
            }else{
                progressDown($target, num, speed);
            }
        }


        window.requestAnimFrame = (function(){
          return  window.requestAnimationFrame       ||
                  window.webkitRequestAnimationFrame ||
                  window.mozRequestAnimationFrame    ||
                  function( callback ){
                    window.setTimeout(callback, 1000 / 60);
                  };
        })();

        window.progressing = progressing;
    })();


    //dom元素，百分比，速度[1,2,3,4,5,6]等速度
    progressing(document.querySelector("#progress1"), 40, 1);
    progressing(document.querySelector("#progress2"), 70, 4);
    
</script>