Spinner Effects

Source Code:

Note: Download jQuery v3.2.0 File (https://blog.jquery.com/2017/03/16/jquery-3-2-0-is-out/)

1) Index.html

<link rel="stylesheet" href="style.css" type="text/css"> 

<script src="jQuery v3.2.0.js"></script>

<script>

$(document).ready(function()

{

$("#bkt1").click(function()

{

$("#bk").toggleClass("bkt1");

});

$("#bkt2").click(function()

{

$("#bk").toggleClass("bkt2");

});

$("#bkt3").click(function()

{

$("#bk").toggleClass("bkt3");

});

});

</script>

<title>BK Tutorial</title>

<center>

      <div id="bk">

    <img src="spinner_image.png" height=411px width=411px> </img>

</div>

 

        <input type="button" value="speed 2x" id="bkt1"  >

<input type="button" value="speed 3x" id="bkt2" >

<input type="button" value="speed 6x" id="bkt3" >

</center>

2)Style.css

.btn

 {

  height:50px;

  position: relative;

}

.bkt1

{    animation:bktutorial 2s linear infinite; }

.bkt2

{    animation:bktutorial 0.5s linear infinite;  }

.bkt3

{   animation:bktutorial 0.1s linear infinite;  }

@keyframes bktutorial

{

0%

{    transform: perspective(100px) rotateZ(0deg);  }

50%

{    transform: perspective(250px) rotateZ(180deg); }

100%

{    transform: perspective(400px) rotateZ(360deg); }

}