How to pause a Spinkit animation?


Tags: javascript,jquery,css3,css-animations

Problem :

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: rotate(90deg);
  transform: rotate(90deg);
}
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.paused {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sk-circle">
  <div class="sk-circle1 sk-child"></div>
  <div class="sk-circle2 sk-child"></div>
  <div class="sk-circle3 sk-child"></div>
  <div class="sk-circle4 sk-child"></div>
  <div class="sk-circle5 sk-child"></div>
  <div class="sk-circle6 sk-child"></div>
  <div class="sk-circle7 sk-child"></div>
  <div class="sk-circle8 sk-child"></div>
  <div class="sk-circle9 sk-child"></div>
  <div class="sk-circle10 sk-child"></div>
  <div class="sk-circle11 sk-child"></div>
  <div class="sk-circle12 sk-child"></div>
</div>

But the animation didn't pause and the circles kept on spinning. Could you help me?



Solution :

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 {
  transform: rotate(210deg);
}
.sk-circle .sk-circle9 {
  transform: rotate(240deg);
}
.sk-circle .sk-circle10 {
  transform: rotate(270deg);
}
.sk-circle .sk-circle11 {
  transform: rotate(300deg);
}
.sk-circle .sk-circle12 {
  transform: rotate(330deg);
}
.sk-circle .sk-circle2:before {
  animation-delay: -1.1s;
}
.sk-circle .sk-circle3:before {
  animation-delay: -1s;
}
.sk-circle .sk-circle4:before {
  animation-delay: -0.9s;
}
.sk-circle .sk-circle5:before {
  animation-delay: -0.8s;
}
.sk-circle .sk-circle6:before {
  animation-delay: -0.7s;
}
.sk-circle .sk-circle7:before {
  animation-delay: -0.6s;
}
.sk-circle .sk-circle8:before {
  animation-delay: -0.5s;
}
.sk-circle .sk-circle9:before {
  animation-delay: -0.4s;
}
.sk-circle .sk-circle10:before {
  animation-delay: -0.3s;
}
.sk-circle .sk-circle11:before {
  animation-delay: -0.2s;
}
.sk-circle .sk-circle12:before {
  animation-delay: -0.1s;
}
@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
.sk-circle .sk-child.paused:before {
  animation-play-state: paused;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sk-circle">
  <div class="sk-circle1 sk-child"></div>
  <div class="sk-circle2 sk-child"></div>
  <div class="sk-circle3 sk-child"></div>
  <div class="sk-circle4 sk-child"></div>
  <div class="sk-circle5 sk-child"></div>
  <div class="sk-circle6 sk-child"></div>
  <div class="sk-circle7 sk-child"></div>
  <div class="sk-circle8 sk-child"></div>
  <div class="sk-circle9 sk-child"></div>
  <div class="sk-circle10 sk-child"></div>
  <div class="sk-circle11 sk-child"></div>
  <div class="sk-circle12 sk-child"></div>
</div>


    CSS Howto..

    How can I drag an element into a dropdown list using jQuery UI sortable()?

    How to add new fonts in CSS for local testing

    how to put all labels in bold with css

    CSS Matrix - how to achieve percentage translation

    How to make CSS hover effect persist after clicking Bootstrap button

    CSS column-count and Chrome bug: how to avoid overflow content being cropped

    How to make font sharp in CSS?

    how to except all elements css inside div with class?

    How to animate selection / deselection in ace editor?

    How to keep indent for second line in ordered lists via CSS?

    How to change the background color(on hover) and css(height/width) of a select option?

    How to style span radio buttons with CSS without images

    Jquery - How to alternate an :Odd :Even pattern every 4 ?

    Scroll Bar not Fully show the value In Div

    How to set a fixed background with CSS?

    How to prevent inner text resizing in CSS Animation @keyframes?

    CSS: How to get a positioned div to resize horizontally with window instead of getting scrollbars

    How do I use CSS to position a fixed variable height header and a scrollable content box?

    How to remove/ignore :hover css style on touch devices

    how to move css element with scrolling left with Jquery?

    How to make two separate, independent columns (using html and css)

    How to make a full page JS and CSS menu

    How to return a javascript set style property to CSS default

    How to properly align rows with bootstrap

    How to change a form's CSS class without affecting FormController.$pristine?

    How to achieve a left and right background split leaving middle div visible?

    How would you code this: The SO highlighted button outline effect [closed]

    How do I keep an image and text centered vertically with bootstrap?

    How do I join my list and div using css?

    Jquery: How to make the content showup below the navigation bar when the anchor link is clicked?