css实现圆环数字进度条动画效果代码
代码语言:html
所属分类:进度条
代码描述:css实现圆环数字进度条动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --eb-progress-value { syntax: "<integer>"; inherits: false; initial-value: 0; } @-webkit-keyframes eb-progress { to { --eb-progress-value: var(--value); } } @keyframes eb-progress { to { --eb-progress-value: var(--value); } } body { font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif; margin: auto; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; background-color: #f2f2f2; max-width: 800px; height: 100vh; } .eb-progress-bar { --size: 4.5rem; --inner-bg: #ffffff; --inner-bg: #f2f2f2; --primary-color: var(--col); --secondary-color: #dae9f7; --secondary-color: #dfe0e0; display: flex; justify-content: center; align-items: center; box-shadow: 0 0px 2px rgba(0, 0, 0, 0.4), inset 0 0px 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 2px rgba(0, 0, 0, 0.2), 0 9px 4px rgba(0, 0, 0, 0.1), inset 0 2px 1px #ffffff8c; width: var(--size); height: var(--size); font-size: calc(var(--size) / 5); color: var(--primary-color); background: radial-gradient(closest-side, var(--inner-bg) 79%, transparent 80% 100%), conic-gradient(var(--primary-color) calc(var(--eb-progress-value) * 1%), var(--secondary-color) 0); border-radius: 50%; } .eb-progress-bar-wrapper { display: grid; place-items: center; gap: 0.5rem; padding: 1rem; transform: scale(1.5); } .eb-progress-bar, .eb-progress-bar::before { -webkit-animation: eb-progress 2s 1 forwards; animation: eb-progress 2s 1 forwards; } .eb-progress-bar::before { counter-reset: percentage var(--eb-progress-value); content: counter(percentage) "%"; font-weight: 400; color: #13242f; font-family: Roboto; font-size: 15px; color: #9e9e9e; background: #f5f6f7; background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #d3d1cb)); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15); padding: 20px 15px; bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0