css进度条

下载代码

html

css

分享到微信朋友圈

html

css

body {
  display: grid;
  grid-gap: 2vmin;
  place-content: center;
  margin: 0;
  min-height: 100vh;
  background: #262f3e;
}

progress {
  box-sizing: border-box;
  border: solid 0.15em #242b35;
  width: 12.5em;
  height: 1em;
  border-radius: 0.5em;
  background: linear-gradient(#191c23, #2d3341);
  font: clamp(.625em, 7.5vw, 5em) monospace;
}
progress::-webkit-progress-bar {
  background: transparent;
}
progress::-webkit-progress-value {
  border-radius: 0.35em;
  box-shadow: inset 0 0.05em 0.05em rgba(255, 255, 255, 0.35);
  background: var(--fill);
}
progress::-moz-progress-bar {
  border-radius: 0.35em;
  box-shadow: inset 0 0.05em 0.05em rgba(255, 255, 255, 0.35);
  background: var(--fill);
}
progress:nth-child(1) {
  --fill:
  	repeating-linear-gradient(90deg,
  		transparent 0 0.15em, #f1c00c 0 0.5em) 0.25em,
  	linear-gradient(#f3c402, #ed7401) ;
}
progress:nth-child(2) {
  --fill:
  	linear-gradient(#ffec9d, transparent 85%),
  	linear-gradient(90deg, #ffe94b, #f94745) ;
}
progress:nth-child(3) {
  --fill:
  	linear-gradient(rgba(226, 102, 76, 0.65), transparent),
  	repeating-linear-gradient(135deg,
  		#a22215 0 0.25em, #be2a20 0 0.5em) ;
}
progress:nth-child(4) {
  --fill:
  	linear-gradient(rgba(215, 131, 227, 0.5), transparent),
  	conic-gradient(from -30deg at 25%,
  			transparent 240deg, #8b42ab 0%) 0/ 0.7em,
  	conic-gradient(from -30deg at 75%,
  			#8b42ab 240deg, #9956b3 0%) 0/ 0.7em ;
}
progress:nth-child(5) {
  --fill:
  	linear-gradient(#d0a9e2, transparent 85%),
  	linear-gradient(90deg, #433485, #dd3c6e) ;
}
progress:nth-child(6) {
  --fill:
  	linear-gradient(rgba(90, 240, 255, 0.85), transparent),
  	repeating-linear-gradient(90deg,
  		#123c92 0 0.0625em, #1b5ec6 0 1em) ;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg