{"id":11969,"date":"2025-12-12T19:15:50","date_gmt":"2025-12-12T11:15:50","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=11969"},"modified":"2025-12-12T19:15:50","modified_gmt":"2025-12-12T11:15:50","slug":"css-progress-function","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2025\/12\/css-progress-function\/","title":{"rendered":"CSS progress()\u51fd\u6570\u7b80\u4ecb"},"content":{"rendered":"

by zhangxinxu<\/a> from https:\/\/www.zhangxinxu.com\/wordpress\/?p=11969<\/a>
\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4f46\u9700\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u3001\u51fa\u5904\u4ee5\u53ca\u6587\u4e2d\u94fe\u63a5\uff0cAI\u6293\u53d6\u4fdd\u7559\u539f\u6587\u5730\u5740\uff0c\u4efb\u4f55\u7f51\u7ad9\u5747\u53ef\u6458\u8981\u805a\u5408\uff0c\u5546\u7528\u8bf7\u8054\u7cfb\u6388\u6743\u3002<\/p>\n

\u4e00\u3001progress()\u51fd\u6570\u8bed\u6cd5<\/h3>\n

\u6700\u8fd1CSS\u53c8\u51fa\u4e86\u4e2a\u65b0\u7684\u51fd\u6570\uff0c\u540d\u53ebprogress()<\/code>\uff0c\u8fd4\u56de0-1<\/code>\u7684\u8fdb\u5ea6\u503c\uff0c\u6211\u7814\u7a76\u4e86\u4e0b\uff0c\u8fd9\u4e2a\u51fd\u6570\u8fd8\u662f\u6709\u4e00\u5b9a\u7684\u5b9e\u7528\u6027\u7684\u3002<\/p>\n

\u6211\u4eec\u5148\u770b\u4e0b\u4ed6\u7684\u8bed\u6cd5\uff1a<\/p>\n

progress(<value>, <start>, <end>)<\/pre>\n
\u8fd9\u4e2a\u51fd\u6570\u652f\u63013\u4e2a\u53c2\u6570\uff0c\u5206\u522b\u662f\uff1a<\/p>\n
\n
value<\/strong><\/dt>\n
\u5f53\u524d\u8fdb\u5ea6\u503c<\/dd>\n
start<\/strong><\/dt>\n
\u8303\u56f4\u8d77\u59cb\u503c<\/dd>\n
end<\/strong><\/dt>\n
\u8303\u56f4\u7ed3\u675f\u503c<\/dd>\n<\/dl>\n
\u56e0\u6b64\uff1a<\/p>\n
    \n
  • progress(300, 0, 1000)<\/code>\u7684\u8fd4\u56de\u503c\u5c31\u662f0.3<\/code>\uff1b<\/li>\n
  • progress(50px, 0px, 100px)<\/code>\u7684\u8fd4\u56de\u503c\u5c31\u662f0.5<\/code>\uff1b<\/li>\n
  • progress(50%, 30%, 80%)<\/code>\u7684\u8fd4\u56de\u503c\u5c31\u662f\u2026\u2026\u8fd9\u4e2a\u8981\u8ba1\u7b97\u4e0b\uff1a(50% - 30%) \/ 80%<\/code>\uff0c\u7ed3\u679c\u662f0.25<\/code>\u3002<\/li>\n<\/ul>\n
    \u9700\u8981\u6ce8\u610f\u7684\u662f\uff0cprogress()<\/code>\u7684\u5404\u4e2a\u53c2\u6570\u7684\u8ba1\u7b97\u503c\u7c7b\u578b\u9700\u8981\u4e00\u81f4\uff0c\u5982\u679c\u4e00\u4e2a\u662f\u65f6\u95f4\u503c\uff0c\u4e00\u4e2a\u662f\u957f\u5ea6\u503c\uff0c\u6216\u8005\u4e00\u4e2a\u662f\u6570\u503c\uff0c\u4e00\u4e2a\u662f\u5355\u4f4d\u503c\uff0c\u662f\u4e0d\u5408\u6cd5\u7684\uff0c\u4e0b\u9762\u8fd9\u4e24\u4e2aprogress()<\/code>\u8bed\u53e5\u5c31\u662f\u975e\u6cd5\u7684\uff1a<\/p>\n
    progress(3s, 0px, 100px)\r\nprogress(3em, 0, 100)<\/pre>\n
    \u4e8c\u3001progress()\u573a\u666f\u5e94\u7528<\/h3>\n
    \u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\uff0cprogress()<\/code>\u51fd\u6570\u90fd\u662f\u4e0eCSS\u53d8\u91cf\uff0c\u6216\u8005\u662fCSS\u76f8\u5bf9\u5355\u4f4d\u7ed3\u5408\u4f7f\u7528\u7684\uff0c\u56e0\u4e3a\u53ea\u6709\u6b64\u65f6\uff0c\u5176\u8fd4\u56de\u503c\u624d\u662f\u52a8\u6001\u7684\uff0c\u624d\u6709\u4f7f\u7528\u7684\u610f\u4e49\uff0c\u5426\u5219\uff0c\u7c7b\u4f3cprogress(300, 0, 1000)<\/code>\u8fd9\u6837\u7684\u56fa\u5b9a\u503c\uff0c\u8fd8\u4e0d\u5982\u76f4\u63a5\u5199\u4e2a0.3<\/code>\u6765\u5f97\u5feb\u6d3b\u5462\uff01<\/p>\n
    \u4f8b\u5982\uff1a<\/p>\n
    \/\/ CSS\u53d8\u91cf\r\nprogress(var(--container-width), 320, 1200)\r\n\/\/ \u76f8\u5bf9\u5355\u4f4d\r\nprogress(100vw, 360px, 1024px)<\/pre>\n
    \u6848\u4f8b<\/h4>\n
    \u5b98\u65b9\u6848\u4f8b\u90fd\u662f\u4f7f\u7528vw<\/code>\u5355\u4f4d\uff0c\u4f46\u662f\u8fd9\u4e2a\u4e0d\u592a\u65b9\u4fbf\u770b\u6587\u7ae0\u7684\u5c0f\u4f19\u4f34\u4f53\u9a8c\u3002<\/p>\n
    \u6240\u4ee5\uff0c\u6211\u6253\u7b97\u4f7f\u7528cqw<\/code>\u5355\u4f4d\u3002<\/p>\n
    HTML\u5982\u4e0b\uff0c\u4e00\u4e2a\u5bb9\u5668\uff0c\u91cc\u9762\u6709\u4e00\u4e2a\u56fe\u7247\uff1a<\/p>\n
    <div class=\"container\">\r\n  <img src=\"mybook.jpg\" alt=\"CSS\u65b0\u4e16\u754c\">\r\n<\/div><\/pre>\n
    \u6b64\u65f6\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u4f7f\u7528progress()<\/code>\u51fd\u6570\uff0c\u8ba9\u56fe\u7247\u7684\u5bbd\u5ea6\u57fa\u4e8e\u5bb9\u5668\u5c3a\u5bf8\u52a8\u6001\u53d8\u5316\uff0cCSS\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
    .container {\r\n  padding: 10px;\r\n  border: dashed gray;\r\n  container-type: inline-size;\r\n  overflow: hidden;\r\n  resize: both;\r\n  \r\n  img {\r\n    width: calc(100px + 200px * progress(80cqw, 150px, 800px));\r\n  }\r\n}<\/pre>\n
    80cqw<\/code>\u8868\u793a.container<\/code>\u5bb9\u5668\u5143\u7d2080%\u7684\u5bbd\u5ea6\uff0c\u7136\u540e\u8fd9\u4e2a\u5bbd\u5ea6\u8ba1\u7b97\u503c\u548c150px-800px<\/code>\u8303\u56f4\u8ba1\u7b97\u8fdb\u5ea6\uff0c\u6700\u7ec8\uff0c\u56fe\u7247\u7684\u5c3a\u5bf8\u4f1a\u5728100px~300px<\/code>\u53d8\u5316\u3002<\/p>\n
    \u5b9e\u65f6\u6e32\u67d3\u6548\u679c\u5982\u4e0b\u6240\u793a\uff08\u9700\u8981Chrome 138+\uff09\uff08\u62d6\u62fd\u53f3\u4e0b\u89d2\u7684resize\u62d6\u62fd\u6761\uff09\uff1a<\/p>\n