jQuery addClass example

Change class name on click in jQuery

by Anderson Carlos Woss

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>
<div class="scroll">
  Space Height for scroll
</div>
<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="54" fill="none" stroke="#dededf" stroke-width="5" />
  <circle class="progress-value" cx="60" cy="60" r="54" fill="none" stroke="#d75e7a" stroke-width="5" stroke-dasharray="339.292" stroke-dashoffset="84.823" transform="rotate(-90 60 60)"/>
</svg>

CSS

.scroll {
  height:1000px
}

.animation {
    -webkit-animation: anima 3s;
            animation: anima 3s;
}

.progress-value {
  stroke-dasharray: 339.292;
  stroke-dashoffset: 84.823;
}

@-webkit-keyframes anima {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    
    stroke-dashoffset: 84.823;
  }
}
@keyframes anima {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    stroke-dashoffset: 84.823;
  }
}

JavaScript

$(document).ready(function() {
  $('.progress-value').waypoint(function() {
    $('.progress-value').addClass('animation');
  }), { offset: '1000px' }
});