js实现一个手动转动摇动的架子啊进度条动画效果代码-html代码-BFW代码库

js实现一个手动转动摇动的架子啊进度条动画效果代码

代码语言：html

所属分类：进度条

代码描述：js实现一个手动转动摇动的架子啊进度条动画效果代码，注意，是要靠鼠标点击摇动才能有进度的。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap");
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: #111;
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hide {
  display: none;
}

.loader {
  position: relative;
  width: 320px;
  height: 320px;
  text-align: center;
  font-size: 24px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  --loaderBarWidth: 0;
  --loaderWheelAngle: 0;
}
.loader_text {
  position: absolute;
  bottom: 220px;
  left: 0;
  width: 320px;
}
.loader_wheel {
  position: absolute;
  top: 110px;
  left: 110px;
  border-radius: 50%;
  background-image: repeating-conic-gradient(#111, #444, #111 30deg);
  border: 3px solid;
  transform: rotate(var(--loaderWheelAngle));
}
.loader_arrows {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #000;
  border-radius: 50%;
  mix-blend-mode: lighten;
}
.loader_arrows::before, .loader_arrows::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-image: conic-gradient(from 45deg at 35px 77px, #fff 90deg, #fff0 90deg), radial-gradient(circle at 50px 57px, #000 25px, #0000 26px), radial-gradient(circle at 50px 43px, #fff 29px, #fff0 30px);
}
.loader_arrows::after {
  transform: rotate(180deg);
  transform-origin: right;
}
.loader_bar {
  position: absolute;
  top: 240px;
  left: 0;
  width: 320px;
  height: 40px;
  border: 2px solid;
}
.loader_bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--loaderBarWidth, 0);
  height: 100%;
  background-color: #798;
}

.postLoader {
  position: relative;
  width: 320px;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.postLoader_text {
  font-size: 24px;
  margin-bottom: 0.5em;
}
.postLoader_btn {
  padding: 0.5em 1em;
}
</style>


</head>

<body>
  <!-- Inspired by Zach Leatherman's tweet -->
<!-- https://twitter.com/zachleat/status/1427308678949089287 -->

<div class="loader">
  <div class="loader_text"></div>
  <div class="loader_wheel">
    <div class="loader_arrows"></div>
  </div>
  <div class="loader_bar"></div>
</div>

<div class="postLoader hide">
  <div class="postLoader_text&.........完整代码请登录后点击上方下载按钮下载查看