circle progress 圆环进度条

https://codepen.io/yichinweng/pen/WNvXevO

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style type="text/css"> svg { height: 90vh; margin: auto; display: block; } path { stroke-linecap: round; stroke-width: 6; } path.grey { stroke: #e7e7e8; } path.blue { stroke: url(#gradient); stroke-dasharray: 198; stroke-dashoffset: 198; animation: dash 3s ease-out forwards; } /* @keyframes dash { to { stroke-dashoffset: 1; /* <---- changed to "1" from "0" */ } } */ </style> </head> <body>  <div id="progress"> <svg viewbox="0 0 110 100"> <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0%" stop-color="#56c4fb" /> <stop offset="100%" stop-color="#0baeff" /> </linearGradient> <path class="grey" d="M30,90 A40,40 0 1,1 80,90" fill='none' /> <path id="blue" fill='none' class="blue" d="M30,90 A40,40 0 1,1 80,90" /> <text x="50%" y="70%" dominant-baseline="middle" text-anchor="middle" style="font-size:18px;">1/2</text> </svg> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> var progress = 0.5 $('#progress').find('#blue').animate({ 'stroke-dashoffset': 198 * progress }, 1000) </script> </html>

提示：你可以先修改部分代码再运行。

https://codepen.io/kishoreraju2/details/VXQdxx

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style type="text/css"> .radial-wrapper { position: absolute; width: 180px; height: 180px; left: calc(50% - 180px); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .radial-wrapper::after { content: ""; background: #fff; border-radius: 50%; width: 164px; height: 164px; position: absolute; top: 8px; left: 8px; } .radial-progress-wrapper .wedge, .radial-progress-wrapper .marker { background: #A4BA32; } .radial-progress-wrapper .radial-left-section .wedge { -webkit-transform: rotateZ(-180deg); transform: rotateZ(-180deg); } .radial-progress-wrapper .radial-right-section .wedge { -webkit-transform: rotateZ(-181deg); transform: rotateZ(-181deg); } .radial-progress-wrapper .marker.end { -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } .radial-section { position: absolute; top: 0; bottom: 0; overflow: hidden; width: 90px; } .wedge { background: #DBDBDB; height: 180px; width: 90px; -webkit-transition: all 1s linear; transition: all 1s linear; } .radial-left-section { left: 0; } .radial-left-section .wedge { border-radius: 180px 0 0 180px; -webkit-transform-origin: 90px 90px; transform-origin: 90px 90px; -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } .radial-right-section { left: 90px; } .radial-right-section .wedge { border-radius: 0 180px 180px 0; left: 0; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .marker { background: #DBDBDB; border-radius: 50%; height: 8px; width: 8px; position: absolute; top: 0; left: calc(50% - 4px); -webkit-transform-origin: 50% 90px; transform-origin: 50% 90px; -webkit-transform: rotateZ(-180deg); transform: rotateZ(-180deg); } .marker.end { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-transition: all 1s linear; transition: all 1s linear; } body { margin: 20px; } .radial-progress-wrapper .radial-left-section .wedge { -webkit-animation: left-loading 3s linear infinite, color-change 3s linear infinite; } .radial-progress-wrapper .radial-right-section .wedge { -webkit-animation: right-loading 3s linear infinite, color-change 3s linear infinite; } .radial-progress-wrapper .marker.end { -webkit-animation: marker 3s linear infinite, color-change 3s linear infinite; } .radial-progress-wrapper .marker { -webkit-animation: color-change 3s linear infinite; } @-webkit-keyframes left-loading { 0% { -webkit-transform: rotateZ(-180deg); transform: rotateZ(-180deg); } 33.3% { -webkit-transform: rotateZ(0); transform: rotateZ(0); } 50% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 66.7% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(-180deg); transform: rotateZ(-180deg); } } @-webkit-keyframes right-loading { 0% { -webkit-transform: rotateZ(-181deg); transform: rotateZ(-181deg); } 33% { -webkit-transform: rotateZ(-181deg); transform: rotateZ(-181deg); } 33.3% { -webkit-transform: rotateZ(-179.1deg); transform: rotateZ(-179.1deg); } 50% { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } 66.7% { -webkit-transform: rotateZ(-181deg); transform: rotateZ(-181deg); } } @-webkit-keyframes marker { 0% { -webkit-transform: rotateZ(-180deg); transform: rotateZ(-180deg); } 50% { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } 100% { -webkit-transform: rotateZ(-180deg); transform: rotateZ(-180deg); } } @-webkit-keyframes color-change { 25% { background: #F8BE1C; } 50% { background: #D00243; } } </style> </head> <body> <div class="radial-wrapper"> <div class="radial-section radial-right-section"> <div class="wedge"></div> </div> <div class="radial-section radial-left-section"> <div class="wedge"></div> </div> <div class="marker start"></div> <div class="marker end"></div> </div> <div class="radial-wrapper radial-progress-wrapper"> <div class="radial-section radial-right-section"> <div class="wedge"></div> </div> <div class="radial-section radial-left-section"> <div class="wedge"></div> </div> <div class="marker start"></div> <div class="marker end"></div> </div> <div> <label> <label> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> // Code builds on from https://cssanimation.rocks/watch/ // Vars var $progressDial = $('.radial-progress-wrapper'); var $leftSection = $progressDial.find('.radial-left-section .wedge'); var $rightSection = $progressDial.find('.radial-right-section .wedge'); var $marker = $progressDial.find('.marker.end'); $(function() { $rangedInput = $('input[type="range"]'); $rangedInput.on('change', function() { console.log('$rangedInput.val(): ', $rangedInput.val()); //console.log('$leftSection.style.transform: ', $leftSection.css('transform')); changeProgressDial($rangedInput.val()); //changeProgressDial(75); }); }); /*var percent = 0; var reverse = false; setInterval(function() { changeProgressDial(percent); if(percent === 100){ percent = 0; } else if (percent === 0) { percent = 100; } }, 1000);*/ var oldValue = 50; function changeProgressDial(value) { var rightAnimationDuration = 0; var leftAnimationDuration = 0; if(value <= 66) { // Ensure the right side is hidden if(oldValue > 66) { rightAnimationDuration = (oldValue - 67) * 10; console.log('rightAnimationDuration: ', rightAnimationDuration); changeTransitionDuration($rightSection, rightAnimationDuration); changeTransitionDuration($marker, rightAnimationDuration); changeTrasformRotateZ($rightSection, -181); changeTrasformRotateZ($marker, 0); } var leftDeg = -Math.abs(180 - Math.round(2.7 * value)); var threshold = oldValue > 66 ? 67 : oldValue; setTimeout(function(){ leftAnimationDuration = Math.abs(threshold - value) * 10; changeTransitionDuration($leftSection, leftAnimationDuration); changeTransitionDuration($marker, leftAnimationDuration); changeTrasformRotateZ($leftSection, leftDeg); changeTrasformRotateZ($marker, leftDeg); }, rightAnimationDuration); } else { // See if LHS needs to change if (oldValue <= 66) { leftAnimationDuration = (67 - oldValue) * 10; changeTransitionDuration($leftSection, leftAnimationDuration); changeTransitionDuration($marker, leftAnimationDuration); changeTrasformRotateZ($leftSection, 0); changeTrasformRotateZ($marker, 0); } var rightDeg = -90 - ((100 - value) * 2.7); var threshold = oldValue < 67 ? 67 : oldValue; setTimeout(function(){ rightAnimationDuration = Math.abs(threshold - value) * 10; changeTransitionDuration($rightSection, rightAnimationDuration); changeTransitionDuration($marker, rightAnimationDuration); changeTrasformRotateZ($rightSection, rightDeg); changeTrasformRotateZ($marker, (180 + rightDeg)); }, leftAnimationDuration) } oldValue = value; } function changeTransitionDuration(element, duration) { element.css('transition-duration', duration + 'ms'); } function changeTrasformRotateZ(element, deg) { element.css('transform', 'rotateZ(' + deg + 'deg)'); } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » circle progress 圆环进度条