react卡片式扇形进度条图表效果代码-html代码-BFW代码库

react卡片式扇形进度条图表效果代码

代码语言：html

所属分类：图表

代码描述：react卡片式扇形进度条图表效果代码

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

<!DOCTYPE html>
<html lang="zh-CN" >

<head>
  <meta charset="UTF-8">
  <title>财务健康度评分卡</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'>
  
<style>
* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 223;
  --sat: 10%;
  --white: hsl(0, 0%, 100%);
  --gray50: hsl(var(--hue), var(--sat), 95%);
  --gray100: hsl(var(--hue), var(--sat), 90%);
  --gray200: hsl(var(--hue), var(--sat), 80%);
  --gray300: hsl(var(--hue), var(--sat), 70%);
  --gray400: hsl(var(--hue), var(--sat), 60%);
  --gray500: hsl(var(--hue), var(--sat), 50%);
  --gray600: hsl(var(--hue), var(--sat), 40%);
  --gray700: hsl(var(--hue), var(--sat), 30%);
  --gray750: hsl(var(--hue), var(--sat), 25%);
  --gray800: hsl(var(--hue), var(--sat), 20%);
  --gray900: hsl(var(--hue), var(--sat), 10%);
  --gray950: hsl(var(--hue), var(--sat), 5%);
  --danger100: hsl(3, 77%, 90%);
  --danger200: hsl(3, 77%, 80%);
  --danger500: hsl(3, 77%, 50%);
  --danger700: hsl(3, 77%, 30%);
  --danger800: hsl(3, 77%, 20%);
  --warning100: hsl(33, 94%, 90%);
  --warning200: hsl(33, 94%, 80%);
  --warning500: hsl(33, 94%, 50%);
  --warning600: hsl(33, 94%, 40%);
  --warning700: hsl(33, 94%, 30%);
  --warning800: hsl(33, 94%, 20%);
  --success100: hsl(153, 60%, 90%);
  --success200: hsl(153, 60%, 80%);
  --success300: hsl(153, 60%, 70%);
  --success500: hsl(153, 60%, 50%);
  --success700: hsl(153, 60%, 30%);
  --success800: hsl(153, 60%, 20%);
  --primary200: hsl(223, 90%, 80%);
  --primary500: hsl(223, 90%, 50%);
  --primary600: hsl(223, 90%, 40%);
  --trans-dur: 0.3s;
  --ease-.........完整代码请登录后点击上方下载按钮下载查看