【Web开发】环形占用进度条源码HTML+CSS
|
admin
2026年8月21日 16:48
本文热度 123
|
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>切片设置｜服务器信息美化预览</title><style>*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;}body{background:#F7F9FC;padding:24px;}.page-wrap{max-width:1200px;margin:0 auto;}.page-title{font-size:20px;font-weight:600;color:#1D2939;margin-bottom:20px;}
.mock-top-block{ background:#ffffff; border-radius:14px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:20px;}
.server-card-wrap{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:14px;}.ring-card{ background:#ffffff; border-radius:14px; padding:20px 14px; display:flex; flex-direction:column; align-items:center; box-shadow:0 1px 3px rgba(0,0,0,0.06);}.ring-container{ position:relative; width:110px; height:110px; margin-bottom:10px;}.ring-svg{width:100%;height:100%;transform:rotate(-90deg);}.ring-bg{stroke:#E5E7EB;fill:none;stroke-width:10;}.ring-value{fill:none;stroke-width:10;stroke-linecap:round;}.ring-text{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:bold;}.card-desc-text{ text-align:center; font-size:15px; color:#1D2939;}.tip-desc{ font-size:13px; color:#667085; margin-bottom:24px; padding:0 4px;}.btn-save{ background:#165DFF; color:#fff; border:none; border-radius:8px; padding:10px 22px; font-size:14px; cursor:pointer;}</style></head><body><div class="page-wrap"> <div class="page-title">切片设置</div> <div class="mock-top-block"> <div>金字塔切片层级 模拟控件区域</div> </div>
<h3 style="margin-bottom:16px;color:#1D2939;">当前服务器信息</h3> <div class="server-card-wrap"> <div class="ring-card"> <div class="ring-container"> <svg class="ring-svg" viewBox="0 0 100 100"> <circle class="ring-bg" cx="50" cy="50" r="42"></circle> <circle class="ring-value" stroke="#00b468" stroke-dasharray="264" stroke-dashoffset="221.76" cx="50" cy="50" r="42"></circle> </svg> <div class="ring-text" style="color:#00b468;">16%</div> </div> <div class="card-desc-text">CPU<br/>2 核心</div> </div>
<div class="ring-card"> <div class="ring-container"> <svg class="ring-svg" viewBox="0 0 100 100"> <circle class="ring-bg" cx="50" cy="50" r="42"></circle> <circle class="ring-value" stroke="#00b468" stroke-dasharray="264" stroke-dashoffset="192.72" cx="50" cy="50" r="42"></circle> </svg> <div class="ring-text" style="color:#00b468;">27%</div> </div> <div class="card-desc-text">内存<br/>2.0GB / 7.5GB</div> </div>
<div class="ring-card"> <div class="ring-container"> <svg class="ring-svg" viewBox="0 0 100 100"> <circle class="ring-bg" cx="50" cy="50" r="42"></circle> <circle class="ring-value" stroke="#FF9500" stroke-dasharray="264" stroke-dashoffset="52.8" cx="50" cy="50" r="42"></circle> </svg> <div class="ring-text" style="color:#FF9500;">80%</div> </div> <div class="card-desc-text">存储总量<br/>64.3GB / 79.9GB</div> </div>
<div class="ring-card"> <div class="ring-container"> <svg class="ring-svg" viewBox="0 0 100 100"> <circle class="ring-bg" cx="50" cy="50" r="42"></circle> <circle class="ring-value" stroke="#00b468" stroke-dasharray="264" stroke-dashoffset="221.76" cx="50" cy="50" r="42"></circle> </svg> <div class="ring-text" style="color:#00b468;">20%</div> </div> <div class="card-desc-text">可用存储<br/>15.6GB</div> </div> </div>
<div class="tip-desc">推荐值会根据核心数、可用内存和剩余存储粗略估算；更高层级会增加切片时间和磁盘占用。</div>
<button class="btn-save">保存切片设置</button></div>
<script> * JS动态计算圆环偏移工具函数 * @param percent 0~100 * @returns dashoffset数值 */function getRingOffset(percent){ const circumference = 2 * Math.PI * 42; return circumference - (percent / 100 * circumference);} * 根据百分比获取颜色 */function getRingColor(pct){ if(pct >=95) return '#F53F3F'; if(pct >=80) return '#FF9500'; return '#00b468';}</script></body></html>
该文章在 2026/8/22 17:20:30 编辑过
400 186 1886
