js实现鼠标按住不放圆环进度条加载进度效果代码-html代码-BFW代码库

js实现鼠标按住不放圆环进度条加载进度效果代码

代码语言：html

所属分类：进度条

代码描述：js实现鼠标按住不放圆环进度条加载进度效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
<style>
@property --pct {
	inherits: true;
	initial-value: 0%;
	syntax: "<percentage>";
}

@property --speed {
	inherits: true;
	initial-value: 200ms;
	syntax: "<time>";
}

body {
	display: flex;
	height: 100dvh;
	place-content: center;
}

.collab {
	aspect-ratio: 1;
	background: linear-gradient(to bottom in oklch, oklch(0.9 0.025 0) 0 0)
			padding-box,
		conic-gradient(
				from 0deg in oklch,
				oklch(0.85 0.37 0) 0%,
				oklch(0.85 0.37 50) var(--pct),
				oklch(0.85 0.37 50 / 0) var(--pct)
			)
			border-box;
	border: 0.5rem solid transparent;
	border-radius: 50%;
	margin-block: auto;
	transition: --pct var(--speed) linear;
	width: 100px;
}
</style>


  
  
</head>

<body >
  <button class="collab" style="--pct: 0%; --speed: 200ms">
	0%
</button>.........完整代码请登录后点击上方下载按钮下载查看