SVG Circular Scroll Progress Bar

Developer
Kyle Foster
Size
7,656 Kb
Views
22,264
  1. SVG Circular Scroll Progress Bar Previews
  2. SVG Circular Scroll Progress Bar HTML Codes
  3. SVG Circular Scroll Progress Bar CSS Codes
  4. SVG Circular Scroll Progress Bar JS Codes

How do I make an svg circular scroll progress bar?

A nice little scroll progress bar that leverages SVG niceness and requestAnimationFrame smoothness.. What is a svg circular scroll progress bar? How do you make a svg circular scroll progress bar? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.

SVG Circular Scroll Progress Bar Previews
IQ Test

SVG Circular Scroll Progress Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Circular Scroll Progress Bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <svg viewBox="0 0 640 640"> <circle fill="#BEDEFD" cx="300" cy="300" r="281.25"/> <path class="outline" fill="none" d="M300 9.375c160.508 0 290.625 130.117 290.625 290.625s-130.117 290.625-290.625 290.625-290.625-130.117-290.625-290.625 130.117-290.625 290.625-290.625"/> <path fill="#FFB278" stroke="#8E5B39" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M470.984 255.836c3.614-.519 7.374-.785 11.245-.785 27.442 0 49.688 12.871 49.688 40.312s-22.246 49.688-49.688 49.688c-11.173 0-21.473-3.703-29.77-9.929"/> <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M465.301 283.205c2.505-.36 5.112-.544 7.795-.544 13.534 0 25.245 4.516 30.877 13.972" fill="none"/> <path fill="#FFB278" stroke="#8E5B39" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M129.016 255.836c-3.614-.519-7.374-.785-11.245-.785-27.442 0-49.688 12.871-49.688 40.312s22.246 49.688 49.688 49.688c11.173 0 21.473-3.703 29.77-9.929"/> <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M134.699 283.205c-2.505-.36-5.112-.544-7.795-.544-13.534 0-25.245 4.516-30.877 13.972" fill="none"/> <path fill="#FFB278" d="M299.607 471.094c-44.903 0-87.991-21.261-121.331-59.863-31.625-36.618-49.763-83.994-49.763-129.981 0-45.428 17.482-84.161 50.555-112.013 30.884-26.008 73.691-40.331 120.539-40.331 46.847 0 89.655 14.323 120.538 40.331 33.073 27.851 50.556 66.585 50.556 112.013 0 45.986-18.138 93.363-49.762 129.981-33.34 38.602-76.429 59.863-121.332 59.863z"/> <path fill="#8E5B39" d="M299.607 135.938c90.609 0 164.062 54.703 164.062 145.312s-73.453 182.812-164.062 182.812-164.062-92.203-164.062-182.812 73.453-145.312 164.062-145.312m0-14.063c-48.502 0-92.918 14.91-125.068 41.984-16.762 14.115-29.834 31.117-38.855 50.536-9.424 20.285-14.202 42.778-14.202 66.856 0 47.649 18.761 96.7 51.473 134.576 16.485 19.088 35.453 34.204 56.378 44.928 22.49 11.526 46.133 17.37 70.275 17.37s47.785-5.844 70.275-17.371c20.924-10.724 39.892-25.84 56.378-44.928 32.711-37.876 51.473-86.927 51.473-134.576 0-24.077-4.778-46.571-14.202-66.856-9.021-19.418-22.094-36.42-38.855-50.536-32.151-27.073-76.568-41.983-125.07-41.983z"/> <path fill="#C17F49" stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M172.118 395.709l-.011-.446c-.036-.788-.061-1.583-.061-2.399 0-15.673 5.202-30.128 13.968-41.744-8.766-11.616-13.968-26.071-13.968-41.744 0-38.315 31.06-69.375 69.375-69.375 26.317 0 49.211 14.655 60.968 36.248 11.757-21.594 34.651-36.249 60.968-36.249 38.315 0 69.375 31.06 69.375 69.375 0 15.673-5.202 30.128-13.968 41.744 7.702 10.207 12.652 22.61 13.738 36.102 19.601-32.369 31.167-70.03 31.167-105.972 0-90.609-73.453-145.312-164.062-145.312s-164.062 54.703-164.062 145.312c0 39.132 13.708 80.303 36.573 114.46z"/> <path fill="#8E5B39" stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M299.607 351.349s-3.047-5.752-10.439-5.752c-2.955 0-5.622 1.227-7.522 3.201 0-7.002 8.15-12.928 18.052-12.928s17.869 5.927 17.869 12.928c-1.899-1.973-4.567-3.201-7.522-3.201-7.391 0-10.438 5.752-10.438 5.752z"/> <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M318.786 206.755c.072-4.109.353-8.396.863-12.789.538-4.637 1.296-7.226 2.233-11.439" fill="none"/> <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M281.57 206.755c-.072-4.109-.353-8.396-.863-12.789-.538-4.637-1.296-7.226-2.233-11.439" fill="none"/> <line stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="300.036" y1="206.755" x2="300.036" y2="172.22" fill="none"/> <g class="default"> <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M337.73 326.688c6.426-1.212 13.684-1.895 21.367-1.895 12.425 0 23.737 1.785 32.216 4.708" fill="none"/> <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M261.938 326.688c-6.426-1.212-13.684-1.895-21.367-1.895-12.425 0-23.738 1.785-32.216 4.708" fill="none"/> <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M328.337 386.338c-4.058 7.051-15.388 12.125-28.73 12.125-13.74 0-25.346-5.382-29.074-12.762" fill="none"/> <circle fill="#8E5B39" cx="241.374" cy="314.975" r="13.593"/> <circle fill="#8E5B39" cx="358.294" cy="314.975" r="13.593"/> </g> <g class="hover" stroke="#8E5B39" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"> <path stroke-width="8" d="M226.155 323.369c0-9.866 7.998-17.864 17.864-17.864s17.864 7.998 17.864 17.864" fill="none"/> <path stroke-width="8" d="M339.144 323.369c0-9.866 7.998-17.864 17.864-17.864s17.864 7.998 17.864 17.864" fill="none"/> <path fill="#8E5B39" stroke-width="10" d="M343.9 380.811c0 18.472-19.439 33.447-43.418 33.447-23.98 0-43.418-14.975-43.418-33.447h86.836z"/> </g> </svg>
</header>
<main> <article> <header> <small> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <circle cx="8" cy="8" r="7.5" fill="none" stroke="#BBB" /> <path stroke="#BBB" stroke-linecap="round" d="M4 8.5h4.5M8.5 3v5.5" /> </svg> November 5th, 1955 </small> <h1><span>A</span> Title <span>of</span> Sorts</h1> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat dolor velit, quis vestibulum magna vulputate ac. Proin sed venenatis libero. Etiam vitae quam eu ipsum scelerisque scelerisque. Integer mattis sit amet sem a tincidunt. Ut tempor euismod mi, varius tempor tellus. Mauris dictum dolor ac fringilla suscipit. Morbi in ligula ut sem laoreet lacinia et vel nibh. In volutpat sapien massa, sed porttitor ipsum hendrerit nec. Aliquam vitae tincidunt justo. Integer lobortis orci nisl, ut dictum libero faucibus quis. Cras vulputate vulputate quam vitae tristique. Aenean suscipit fermentum leo sed pharetra. Fusce sit amet lorem id arcu porta bibendum. Nulla ultricies scelerisque ligula, vel lobortis dui tempus sed. Cras a ipsum purus. Duis non vestibulum purus.</p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac est vel erat elementum ultrices in at risus. Integer elit nibh, rutrum ac orci quis, egestas pulvinar nibh. Ut eget placerat ante. Suspendisse tristique tristique varius. Curabitur consectetur est libero, sed iaculis elit sagittis vitae. Duis vel cursus quam. Praesent sed rutrum tortor. Nulla et ultricies velit. Vestibulum ac ante iaculis, tristique nulla vitae, placerat metus.</p> <p>Vestibulum aliquet tempor purus sed fringilla. Etiam adipiscing porta adipiscing. Proin semper urna sed augue placerat, sit amet mollis felis mollis. Nullam a dolor augue. Nulla turpis nunc, malesuada at tempus sit amet, laoreet quis purus. Sed ullamcorper nunc quis pellentesque interdum. Curabitur et aliquam ligula. Donec ut erat ultrices, viverra massa congue, sagittis purus. Sed non libero tortor. Nam sit amet cursus felis. Integer pretium luctus ante eget tempor. Vivamus adipiscing diam sapien, sit amet sollicitudin lectus fringilla non. Nunc ac malesuada ligula, eu tempus purus. Sed vel ipsum at odio cursus rutrum.</p> <p>Proin vel nunc vitae magna convallis vehicula id vitae mauris. Ut nec dapibus dolor. Sed vestibulum, nisi quis blandit malesuada, est neque facilisis nulla, a posuere erat lectus ut mauris. Aliquam varius, tortor non interdum malesuada, urna turpis dictum massa, ut malesuada metus velit eget lacus. Sed sollicitudin porta eleifend. Curabitur auctor, metus vel elementum malesuada, urna mi tempus risus, eget elementum risus sem vel tortor. Aliquam erat volutpat. Proin dignissim lectus felis, mattis convallis orci fringilla sit amet. Suspendisse pharetra nulla facilisis ipsum bibendum, eget laoreet purus consequat.</p> <p>Etiam hendrerit, felis et mattis feugiat, augue orci suscipit leo, in consequat orci nunc quis neque. Integer ullamcorper condimentum leo ac gravida. Curabitur non imperdiet leo, non commodo mauris. Etiam eleifend consectetur est, ullamcorper facilisis orci tristique sit amet. Integer dictum justo a sapien fermentum, ut imperdiet risus ornare. Integer dapibus a turpis et accumsan. Vivamus at pulvinar enim, et viverra lorem. In hac habitasse platea dictumst. Nam porta, erat ut mattis scelerisque, tortor nisi ullamcorper sapien, sed volutpat ipsum tellus at orci. Donec rhoncus metus in augue congue, vel faucibus neque tincidunt. Nunc in leo dui. Nullam vel tincidunt sapien. Cras molestie placerat nisl, quis condimentum sem dictum id. Nunc laoreet vehicula quam hendrerit vulputate.</p> <p>Etiam imperdiet id leo in feugiat. Duis mollis sed elit sit amet dapibus. Phasellus ultricies commodo tempus. Aliquam erat volutpat. Suspendisse lacinia felis eu augue congue, at vestibulum nisi venenatis. Mauris non magna porta, rutrum lectus vel, convallis dui. Suspendisse in metus orci. Nunc ullamcorper consectetur enim, vel tincidunt tellus volutpat sit amet. Cras ut nulla quam. Nulla sollicitudin lacus et sapien lobortis, sed scelerisque ante vulputate. Nullam viverra est non mauris faucibus, non imperdiet lacus euismod. Pellentesque nec ornare nisl. Donec porttitor, augue quis pulvinar pretium, dui mi tristique quam, quis commodo velit eros ut leo. Maecenas fringilla dictum rutrum.</p> <p>Duis suscipit, augue vitae dictum aliquam, erat enim blandit nisl, vitae ultricies orci odio vitae nunc. Donec bibendum semper est id vestibulum. Nullam aliquam et diam et facilisis. Sed elementum ultricies sapien, a posuere urna hendrerit vel. Sed molestie dui in leo condimentum hendrerit. Nunc pharetra magna a vulputate lobortis. Duis dapibus vehicula viverra. Cras non urna nibh. Morbi semper eleifend leo. Nam id gravida sapien, vel tempor ipsum. Aliquam vel consectetur tortor. Etiam suscipit velit vel neque luctus malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras iaculis risus vel odio euismod, ac dapibus turpis mattis. Fusce eu lorem at urna fringilla posuere. Vestibulum vel risus nec nulla gravida laoreet.</p> <p>Pellentesque sagittis scelerisque diam in lobortis. Aliquam ac sem nec urna suscipit pellentesque. In condimentum, risus vitae consequat iaculis, est purus elementum dolor, in tristique dolor mi et ipsum. Pellentesque ut lectus vel urna rhoncus ullamcorper. Quisque sed eleifend massa, et varius ipsum. In vestibulum interdum ipsum et mattis. Phasellus non libero eget metus fermentum aliquet a id diam. Proin non vulputate libero. Suspendisse vulputate turpis eros, non rhoncus neque auctor vel. Duis a eros orci. Aenean vulputate malesuada eros et tincidunt.</p> <p>Ut venenatis massa justo, sed pulvinar nunc molestie ut. Pellentesque auctor augue nec cursus cursus. Nunc vel mauris quis metus feugiat viverra nec at nunc. Nullam placerat dictum neque pretium pellentesque. Nam quam risus, iaculis ut lacinia non, rhoncus eu nulla. Sed sodales orci nec auctor porta. Suspendisse et tortor ac turpis pellentesque tempus ut sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> <p>Duis vehicula tellus et gravida aliquam. Nullam consequat dapibus rutrum. Praesent fringilla metus eget metus varius, sed interdum lectus mollis. Sed nec vehicula diam. Duis mi velit, interdum eu odio nec, tincidunt egestas nulla. Pellentesque aliquet ultrices dui, in posuere enim. Mauris vitae molestie lectus. Etiam blandit placerat neque. Duis quis odio a neque condimentum luctus nec sed nisl. Nullam tellus felis, hendrerit eu suscipit at, ultrices id sapien.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat dolor velit, quis vestibulum magna vulputate ac. Proin sed venenatis libero. Etiam vitae quam eu ipsum scelerisque scelerisque. Integer mattis sit amet sem a tincidunt. Ut tempor euismod mi, varius tempor tellus. Mauris dictum dolor ac fringilla suscipit. Morbi in ligula ut sem laoreet lacinia et vel nibh. In volutpat sapien massa, sed porttitor ipsum hendrerit nec. Aliquam vitae tincidunt justo. Integer lobortis orci nisl, ut dictum libero faucibus quis. Cras vulputate vulputate quam vitae tristique. Aenean suscipit fermentum leo sed pharetra. Fusce sit amet lorem id arcu porta bibendum. Nulla ultricies scelerisque ligula, vel lobortis dui tempus sed. Cras a ipsum purus. Duis non vestibulum purus.</p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac est vel erat elementum ultrices in at risus. Integer elit nibh, rutrum ac orci quis, egestas pulvinar nibh. Ut eget placerat ante. Suspendisse tristique tristique varius. Curabitur consectetur est libero, sed iaculis elit sagittis vitae. Duis vel cursus quam. Praesent sed rutrum tortor. Nulla et ultricies velit. Vestibulum ac ante iaculis, tristique nulla vitae, placerat metus.</p> <p>Vestibulum aliquet tempor purus sed fringilla. Etiam adipiscing porta adipiscing. Proin semper urna sed augue placerat, sit amet mollis felis mollis. Nullam a dolor augue. Nulla turpis nunc, malesuada at tempus sit amet, laoreet quis purus. Sed ullamcorper nunc quis pellentesque interdum. Curabitur et aliquam ligula. Donec ut erat ultrices, viverra massa congue, sagittis purus. Sed non libero tortor. Nam sit amet cursus felis. Integer pretium luctus ante eget tempor. Vivamus adipiscing diam sapien, sit amet sollicitudin lectus fringilla non. Nunc ac malesuada ligula, eu tempus purus. Sed vel ipsum at odio cursus rutrum.</p> <p>Proin vel nunc vitae magna convallis vehicula id vitae mauris. Ut nec dapibus dolor. Sed vestibulum, nisi quis blandit malesuada, est neque facilisis nulla, a posuere erat lectus ut mauris. Aliquam varius, tortor non interdum malesuada, urna turpis dictum massa, ut malesuada metus velit eget lacus. Sed sollicitudin porta eleifend. Curabitur auctor, metus vel elementum malesuada, urna mi tempus risus, eget elementum risus sem vel tortor. Aliquam erat volutpat. Proin dignissim lectus felis, mattis convallis orci fringilla sit amet. Suspendisse pharetra nulla facilisis ipsum bibendum, eget laoreet purus consequat.</p> <p>Etiam hendrerit, felis et mattis feugiat, augue orci suscipit leo, in consequat orci nunc quis neque. Integer ullamcorper condimentum leo ac gravida. Curabitur non imperdiet leo, non commodo mauris. Etiam eleifend consectetur est, ullamcorper facilisis orci tristique sit amet. Integer dictum justo a sapien fermentum, ut imperdiet risus ornare. Integer dapibus a turpis et accumsan. Vivamus at pulvinar enim, et viverra lorem. In hac habitasse platea dictumst. Nam porta, erat ut mattis scelerisque, tortor nisi ullamcorper sapien, sed volutpat ipsum tellus at orci. Donec rhoncus metus in augue congue, vel faucibus neque tincidunt. Nunc in leo dui. Nullam vel tincidunt sapien. Cras molestie placerat nisl, quis condimentum sem dictum id. Nunc laoreet vehicula quam hendrerit vulputate.</p> <p>Etiam imperdiet id leo in feugiat. Duis mollis sed elit sit amet dapibus. Phasellus ultricies commodo tempus. Aliquam erat volutpat. Suspendisse lacinia felis eu augue congue, at vestibulum nisi venenatis. Mauris non magna porta, rutrum lectus vel, convallis dui. Suspendisse in metus orci. Nunc ullamcorper consectetur enim, vel tincidunt tellus volutpat sit amet. Cras ut nulla quam. Nulla sollicitudin lacus et sapien lobortis, sed scelerisque ante vulputate. Nullam viverra est non mauris faucibus, non imperdiet lacus euismod. Pellentesque nec ornare nisl. Donec porttitor, augue quis pulvinar pretium, dui mi tristique quam, quis commodo velit eros ut leo. Maecenas fringilla dictum rutrum.</p> <p>Duis suscipit, augue vitae dictum aliquam, erat enim blandit nisl, vitae ultricies orci odio vitae nunc. Donec bibendum semper est id vestibulum. Nullam aliquam et diam et facilisis. Sed elementum ultricies sapien, a posuere urna hendrerit vel. Sed molestie dui in leo condimentum hendrerit. Nunc pharetra magna a vulputate lobortis. Duis dapibus vehicula viverra. Cras non urna nibh. Morbi semper eleifend leo. Nam id gravida sapien, vel tempor ipsum. Aliquam vel consectetur tortor. Etiam suscipit velit vel neque luctus malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras iaculis risus vel odio euismod, ac dapibus turpis mattis. Fusce eu lorem at urna fringilla posuere. Vestibulum vel risus nec nulla gravida laoreet.</p> <p>Pellentesque sagittis scelerisque diam in lobortis. Aliquam ac sem nec urna suscipit pellentesque. In condimentum, risus vitae consequat iaculis, est purus elementum dolor, in tristique dolor mi et ipsum. Pellentesque ut lectus vel urna rhoncus ullamcorper. Quisque sed eleifend massa, et varius ipsum. In vestibulum interdum ipsum et mattis. Phasellus non libero eget metus fermentum aliquet a id diam. Proin non vulputate libero. Suspendisse vulputate turpis eros, non rhoncus neque auctor vel. Duis a eros orci. Aenean vulputate malesuada eros et tincidunt.</p> <p>Ut venenatis massa justo, sed pulvinar nunc molestie ut. Pellentesque auctor augue nec cursus cursus. Nunc vel mauris quis metus feugiat viverra nec at nunc. Nullam placerat dictum neque pretium pellentesque. Nam quam risus, iaculis ut lacinia non, rhoncus eu nulla. Sed sodales orci nec auctor porta. Suspendisse et tortor ac turpis pellentesque tempus ut sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> <p>Duis vehicula tellus et gravida aliquam. Nullam consequat dapibus rutrum. Praesent fringilla metus eget metus varius, sed interdum lectus mollis. Sed nec vehicula diam. Duis mi velit, interdum eu odio nec, tincidunt egestas nulla. Pellentesque aliquet ultrices dui, in posuere enim. Mauris vitae molestie lectus. Etiam blandit placerat neque. Duis quis odio a neque condimentum luctus nec sed nisl. Nullam tellus felis, hendrerit eu suscipit at, ultrices id sapien.</p> </article>
</main> <script src="js/index.js"></script>
</body>
</html>

SVG Circular Scroll Progress Bar - Script Codes CSS Codes

html { box-sizing: border-box;
}
*,
*:before,
*:after { box-sizing: inherit;
}
body { color: #444; padding: 5vw; font: 1.125em/1.667 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; letter-spacing: .01em; -webkit-font-smoothing: antialiased;
}
body > header { position: fixed; left: 0; top: 0; width: 150px; height: 100%;
}
body > header > svg { position: absolute; top: 30px; left: 30px; height: 90px; width: 90px;
}
body > header > svg .default { opacity: 1;
}
body > header > svg .hover { opacity: 0;
}
body > header > svg:hover { -webkit-animation: bounce .6s ease-out; animation: bounce .6s ease-out;
}
body > header > svg:hover .default { opacity: 0;
}
body > header > svg:hover .hover { opacity: 1;
}
article p { margin-top: 1.5em; margin-bottom: 1.5em;
}
article header { text-align: center;
}
article header small { font-size: .6em; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; display: block; margin-bottom: -2em;
}
article header small svg { display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin: -2px 4px 0 0;
}
article header h1 { color: #1E90FF; font-weight: 900; font-size: 3.5em; line-height: .85;
}
main { margin: 0 auto; max-width: 40em;
}
@-webkit-keyframes bounce { 0%, 20%, 50%, 70%, 90%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 60% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 80% { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
}
@keyframes bounce { 0%, 20%, 50%, 70%, 90%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 60% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 80% { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
}

SVG Circular Scroll Progress Bar - Script Codes JS Codes

var progressPath = document.querySelector( '.outline' ), pathLength = progressPath.getTotalLength(), lastPosition = -1;
progressPath.style.stroke = '#1E90FF';
progressPath.style.strokeWidth = 20;
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
function updateProgress() { var progress = pathLength - ( window.pageYOffset * pathLength / ( document.body.scrollHeight - window.innerHeight ) ); // Update dashOffset progressPath.style.strokeDashoffset = progress;
}
function loop() { if ( lastPosition == window.pageYOffset ) { window.requestAnimationFrame( loop ); return false; } else { lastPosition = window.pageYOffset; updateProgress(); } window.requestAnimationFrame( loop );
}
// Call the loop for the first time
loop();
SVG Circular Scroll Progress Bar - Script Codes
SVG Circular Scroll Progress Bar - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded September 04, 2022
Rating 4.5
Size 7,656 Kb
Views 22,264
Do you need developer help for SVG Circular Scroll Progress Bar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Foster (hkfoster) Script Codes
Name
Vanilla Flavored Hypher
Messing Around with CSS3 Shadows
Super Simple Fader
Colored Single-Element Sections
Freemason.js
Gradual.js
SVG Optimization Breakdown
Slimslider.js
A Pen by Kyle Foster
Manipulating SVG With CSS
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!