jquery双层进度条效果
代码语言:html
所属分类:加载滚动
代码描述:jquery双层进度条效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> html,body { height: 100% } body { background: #3c3b52; background-image: -webkit-radial-gradient(top,circle cover,#3c3b52 0%,#252233 80%); background-image: -moz-radial-gradient(top,circle cover,#3c3b52 0%,#252233 80%); background-image: -o-radial-gradient(top,circle cover,#3c3b52 0%,#252233 80%); background-image: radial-gradient(circle cover at top,#3c3b52 0%,#252233 80%) } .circleProgress_wrapper { width: 120px; height: 120px; position: relative; border: 1px solid #3c3b52; border-radius: 60px; background-image: url(../1.png); background-size: 100% 100%; left: 50%; top: 25%; transform: translate(-50%,-50%) } .wrapper { width: 60px; height: 120px; position: absolute; top: 0; overflow: hidden } .right { right: 0 } .left { left: 0 } .circleProgress { width: 110px; height: 110px; border: 5px solid transparent; border-radius: 50%; position: absolute; top: 0 } .rightcircle { border-top: 5px solid #ccc; border-right: 5px solid #ccc; right: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 2s ease .3s } .leftcircle { border-bottom: 5px solid #ccc; border-left: 5px solid #ccc; left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 2s ease .3s } .zhongxing { width: 110px; height: 110px; background: #3c3b52; margin-top: 5px; margin-left: 5px; border-radius: 50% } .gaoliang { content: ''; display: block; width: 50%; height: 30%; border-radius: 5px; position: absolute; top: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.05),0 0 4px rgba(0,0,0,.33) inset; -webkit-transition: .3s; transition: .3s } .barPie--radio { margin: 20px; width: 200px; height: 200px; text-align: center; font: 700 50px open sans condensed,sans-serif; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto } .barPie { -webkit-perspective: 1000px; perspective: 1000px } .barPie__value { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 50%; height: 50%; margin: auto; position: relative; top: 50%; margin-top: -25%; z-index: 1; color: rgba(255,255,255,.8); font-size: .8em; text-shadow: 0 1px rgba(0,0,0,.5),0 2px rgba(0,0,0,.4),0 3px 1px rgba(0,0,0,.2) } .barPie__value::after { content: '%'; display: inline-block; opacity: .3; font-size: .5em; margin-left: .1em } .barPie__ring { width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-transform: rotateY(180deg); transform: rotateY(180deg) } .barPie__ring label { cursor: pointer } .barPie__ring__item { position: absolute; width: 10px; height: 50%; top: 0; left: 50%; margin-left: -5px; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: .1s; transition: .1s } .barPie__ring__item::before { content: ''; display: block; width: 50%; height: 30%; border-radius: 5px; background: rgba(0,0,0,.15); box-shadow: 0 0 0 1px rgba(255,255,255,.05),0 0 4px rgba(0,0,0,.33) inset; -webkit-transition: .3s; transition: .3s } .barPie__ring__item:nth-of-type(1) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0