Marcus Vinícius Monteiro February 2016

How to pause a Spinkit animation?

I'm using a loading indicator from Spinkit, specifically the circle indicator, but I didn't figure how to pause the animation, so the circle can be still on the screen without spinning.

The CSS is this. Following an answer from this question, I tried to toggle this class on click using jQuery:

.paused{
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused;
  animation-play-state:paused;
}

$(document).ready(() => {
  $('.sk-circle').click(function() {
    $(this).toggleClass('paused')
  })
})
.sk-circle {
  margin: 40px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotat        

Answers


Harry February 2016

The reason why your code did not work is because you are adding the paused class to .sk-circle when it is clicked but the animation is actually present on the .sk-child element's pseudo.

So, modify the jQuery code such that the class is added on the .sk-child element and then in CSS set the animation-play-state: paused under .sk-circle .sk-child.paused:before. This would set the paused play state to the animation. (The selector has to be more specific because the one that is adding the animation has a specificity of 021.)

Note: I've removed the browser prefixes in the below snippet and included prefix-free library to keep it small.

$(document).ready(function() {
  $('.sk-circle').on('click', function() {
    $('.sk-circle .sk-child').toggleClass('paused');
  });
});
.sk-circle {
  margin: 40px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  transform: rotate(30deg);
}
.sk-circle .sk-circle3 {
  transform: rotate(60deg);
}
.sk-circle .sk-circle4 {
  transform: rotate(90deg);
}
.sk-circle .sk-circle5 {
  transform: rotate(120deg);
}
.sk-circle .sk-circle6 {
  transform: rotate(150deg);
}
.sk-circle .sk-circle7 {
  transform: rotate(180deg);
}
.sk-circle .sk-circle8 

Post Status

Asked in February 2016
Viewed 1,707 times
Voted 13
Answered 1 times

Search




Leave an answer