progressbar实现金额数字变动和半圆进度条动画效果代码-html代码-BFW代码库

progressbar实现金额数字变动和半圆进度条动画效果代码

代码语言：html

所属分类：进度条

代码描述：progressbar实现金额数字变动和半圆进度条动画效果代码

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

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

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


  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap");
@property --num {
  syntax: "<integer>";
  initial-value: 1000000;
  inherits: false;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: auto;
  height: 100vh;
  background-color: #000813;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 32px;
}

svg {
  fill: none;
  position: absolute;
}

.balance-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}

.label {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #B3B5B9;
  margin-bottom: 4px;
}

.amount, .amount2 {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 32px;
  line-height: 40px;
  color: #FCBC2C;
}
.amount.amount2, .amount2.amount2 {
  color: #FFF;
}

.countup {
  animation: counter 1.2s 1;
  counter-reset: num var(--num);
}

.countup::after {
  content: counter(num);
}

@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: 1000000;
  }
}
</style>


  
</head>

<body >
  <div class="container">
  <svg width="278" height="89" viewBox="0 0 278 89" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="chart-path" d="M4.09863 85C29.6533 36.8181 80.3275 4 138.667 4C197.006 4 247.68 36.8181 273.235 85" stroke="#62676F" stroke-width="8" stroke-linecap="round" />
    <path id="chart-progress" d="M4.09863 85C29.6533 36.8181 80.3275 4 138.667 4C197.006 4 247.68 36.8181 273.235 85" stroke="#FCBC2C" stroke-width="8" stroke-linecap="round" />
  </svg>
  <div class="balance-container.........完整代码请登录后点击上方下载按钮下载查看