css实现进度条动画效果代码-html代码-BFW代码库

css实现进度条动画效果代码

代码语言：html

所属分类：进度条

代码描述：css实现进度条动画效果代码

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

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

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

  
  
<style>
@property --x {
  syntax: '<integer>';
  inherits: true;
  initial-value: 100; 
}
@property --y {
  syntax: '<number>';
  inherits: true;
  initial-value: 1; 
}
progress {
  width: 150px;
  height: 150px;
  appearance: none;
  position: relative;
  animation: y 2s .5s both;
  timeline-scope: --progress;
}
progress::-webkit-progress-bar {
  overflow: auto;
  visibility: hidden;
}
progress::-webkit-progress-value {
  view-timeline: --progress inline;
}
progress::before,
progress::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: x linear;
  animation-timeline: --progress;
  animation-range: entry 100% exit 100%;
}
progress::before {
  content: counter(val) "%";
  counter-reset: val calc(var(--y)*var(--x));
  display: grid;
  place-.........完整代码请登录后点击上方下载按钮下载查看