JAVASCRIPT   140

radial progress

Guest on 19th April 2022 01:22:14 AM

  1. $(function(){
  2.  
  3.     // Remove svg.radial-progress .complete inline styling
  4.     $('svg.radial-progress').each(function( index, value ) {
  5.         $(this).find($('circle.complete')).removeAttr( 'style' );
  6.     });
  7.  
  8.     // Activate progress animation on scroll
  9.     $(window).scroll(function(){
  10.         $('svg.radial-progress').each(function( index, value ) {
  11.             // If svg.radial-progress is approximately 25% vertically into the window when scrolling from the top or the bottom
  12.             if (
  13.                 $(window).scrollTop() > $(this).offset().top - ($(window).height() * 0.75) &&
  14.                 $(window).scrollTop() < $(this).offset().top + $(this).height() - ($(window).height() * 0.25)
  15.             ) {
  16.                 // Get percentage of progress
  17.                 percent = $(value).data('percentage');
  18.                 // Get radius of the svg's circle.complete
  19.                 radius = $(this).find($('circle.complete')).attr('r');
  20.                 // Get circumference (2Ļ€r)
  21. r)
  22.                 circumference = 2 * Math.PI * radius;
  23.              // Get stroke-dashoffset value based on the percentage of the circumference
  24. ce
  25.                 strokeDashOffset = circumference - ((percent * circumference) / 100);
  26.              // Transition progress for 1.25 seconds
  27. ds
  28.                 $(this).find($('circle.complete')).animate({'stroke-dashoffset': strokeDashOffset}, 1250);
  29.             }
  30.         });
  31.     }).trigger('scroll');
  32.  
  33.  

Raw Paste


Login or Register to edit or fork this paste. It's free.