渐变闪亮预加载HTML动画源码

聪明小米

预加载器是您在页面的其余内容仍在加载时在屏幕上检查的内容。预加载器或加载器通常是简单或复杂的动画，用于在服务器草作完成处理时让访问者保持娱乐。

HTML：

• <!DOCTYPE html>
  <html lang="en" dir="ltr">
  <head>
  <meta charset="utf-8">
  <title>渐变闪亮加载动画 - 巨神</title>
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <div class="outer"></div>
  <div class="inner">
  <span>0%</span>
  </div>
  <script>
  let outer = document.querySelector(".outer");
  let inner = document.querySelector(".inner");
  let percent = document.querySelector("span");
  let count = 0;
  inner.addEventListener('click', function(){
  let loading = setInterval(function(){
  if(count == 100){
  outer.classList.remove("active-loader");
  outer.classList.add("active-loader-2");
  clearInterval();
  }else{
  count = count + 1;
  percent.textContent = count + '%';
  outer.classList.add("active-loader");
  }
  },200);
  });
  </script>
  </body>
  </html>
  

复制代码
style.css：

• html,body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
  background: #240f52;
  overflow: hidden;
  }
  .outer{
  height: 300px;
  width: 300px;
  background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  border-radius: 50%;
  }
  .inner{
  position: absolute;
  width: 275px;
  height: 275px;
  text-align: center;
  line-height: 275px;
  background: #240f52;
  border-radius: 50%;
  cursor: default;
  /* opacity: 0; */
  }
  .inner span{
  font-size: 60px;
  font-weight: 800;
  background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-size: 300%;
  }
  .outer.active-loader{
  animation: rotate 2s ease infinite;
  }
  @keyframes rotate {
  to{
  transform: rotate(360deg);
  }
  }
  .outer.active-loader-2{
  animation: rotate2 3s ease;
  }
  @keyframes rotate2 {
  to{
  transform: rotate(360deg);
  }
  }
  

复制代码

超级小爱

正好在找这类的，谢了