📝 代码查看
使用runcode.html页面

2
查看次数
2025-10-31
创建时间
2025-10-31
最后更新
<div class="loading">
  <div class="circle">
    <div class="percent left"></div>
    <div class="percent right wth0"></div>
  </div>
  <div class="per"></div>
</div>
<script src="https://static.cdsy.xyz/script/jquery.min.js"></script>
.loading,
.circle,
.percent {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  z-index: 9999;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.circle {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 10px solid #fff;
  clip: rect(0, 100px, 100px, 50px);
}

.clip-auto {
  clip: rect(auto, auto, auto, auto);
}

.percent {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  top: -10px;
  left: -10px;
}

.left {
  -webkit-transition: -webkit-transform ease;
  transition: -webkit-transform ease;
  transition: transform ease;
  border: 10px solid #E54B00;
  clip: rect(0, 50px, 100px, 0);
}

.right {
  border: 10px solid #E54B00;
  clip: rect(0, 100px, 100px, 50px);
}

.wth0 {
  width: 0;
}
var per = 0;
setInterval(function() {
  per += 25;
  if (per > 180 && per < 360) {
    $('.circle').addClass('clip-auto');
    $('.right').removeClass('wth0');
  } else if (per > 360) {
    per = 0;
    $('.circle').removeClass('clip-auto');
    $('.right').addClass('wth0');
  }
  $('.left').animate({
    deg: per
  }, {
    step: function(n, fx) {
      $(this).css({
        "-webkit-transform": "rotate(" + n + "deg)",
        "-moz-transform": "rotate(" + n + "deg)",
        "transform": "rotate(" + n + "deg)"
      });
    },
    duration: 500
  })
}, 3500)

👁️ 实时预览