Jquery Spinner - Click To Spin Animated Spinner
close
Jquery Spinner - Click To Spin Animated Spinner

Jquery Spinner - Click To Spin Animated Spinner

Jquery Spinner - Click To Spin Animated Spinner

Today i have created jquery spinner or animated click to spin for you which you can use as a gameplay on your website if you are having a prize sharing website them this jquery spinner will be very much useful for you.

Greetings developers today we are going to invent Jquery Spinner Click To Spin

As you know the HTML markup is needed for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

There are some external files used in the code provided below your can download them if you want:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

Save It As Jquery Spinner Click To Spin/index.html :

<!DOCTYPE html>
<html lang="en" ><head><meta charset="UTF-8"><title>Trivia Crack Inspired - Spinning Wheel</title><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'><link rel="stylesheet" href="css/style.css"></head><body>
<div id="wrapper"><div id="wheel"><div id="inner-wheel"><div class="sec"><span class="fa fa-bell-o"></span></div><div class="sec"><span class="fa fa-comment-o"></span></div><div class="sec"><span class="fa fa-smile-o"></span></div><div class="sec"><span class="fa fa-heart-o"></span></div><div class="sec"><span class="fa fa-star-o"></span></div><div class="sec"><span class="fa fa-lightbulb-o"></span></div></div><div id="spin"><div id="inner-spin"></div></div><div id="shine"></div></div><div id="txt"></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="js/index.js"></script></body></html>

This was our html code you can copy codes on this website by clicking on any code.

I have used some icons in this jquery spinner so for that i will use font-awesome css library for that and jquery is must because without it our javascript code will not be executed.
Without CSS our this script (Jquery Spinner Click To Spin) will never look pretty. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.

So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Jquery Spinner Click To Spin/css/style.css :

*{margin:0;padding:0}body{background:#eaeaea;color:#fff;font-size:18px;font-family:'Exo 2', sans-serif}a{color:#34495e}#wrapper{margin:40px auto 0;width:266px;position:relative}#txt{color:#eaeaea}#wheel{width:250px;height:250px;border-radius:50%;position:relative;overflow:hidden;border:8px solid #fff;box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;transform:rotate(0deg)}#wheel:before{content:'';position:absolute;border:4px solid rgba(0,0,0,0.1);width:242px;height:242px;border-radius:50%;z-index:1000}#inner-wheel{width:100%;height:100%;-webkit-transition:all 6s cubic-bezier(0,.99,.44,.99);-moz-transition:all 6 cubic-bezier(0,.99,.44,.99);-o-transition:all 6s cubic-bezier(0,.99,.44,.99);-ms-transition:all 6s cubic-bezier(0,.99,.44,.99);transition:all 6s cubic-bezier(0,.99,.44,.99)}#wheel div.sec{position:absolute;width:0;height:0;border-style:solid;border-width:130px 75px 0;border-color:#19c transparent;transform-origin:75px 129px;left:50px;top:-4px;opacity:1}#wheel div.sec:nth-child(1){transform:rotate(60deg);-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-o-transform:rotate(60deg);-ms-transform:rotate(60deg);border-color:#16a085 transparent}#wheel div.sec:nth-child(2){transform:rotate(120deg);-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);-o-transform:rotate(120deg);-ms-transform:rotate(120deg);border-color:#2980b9 transparent}#wheel div.sec:nth-child(3){transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);border-color:#34495e transparent}#wheel div.sec:nth-child(4){transform:rotate(240deg);-webkit-transform:rotate(240deg);-moz-transform:rotate(240deg);-o-transform:rotate(240deg);-ms-transform:rotate(240deg);border-color:#f39c12 transparent}#wheel div.sec:nth-child(5){transform:rotate(300deg);-webkit-transform:rotate(300deg);-moz-transform:rotate(300deg);-o-transform:rotate(300deg);-ms-transform:rotate(300deg);border-color:#d35400 transparent}#wheel div.sec:nth-child(6){transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);border-color:#c0392b transparent}#wheel div.sec .fa{margin-top:-100px;color:rgba(0,0,0,0.2);position:relative;z-index:10000000;display:block;text-align:center;font-size:36px;margin-left:-15px;text-shadow:rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px}#spin{width:68px;height:68px;position:absolute;top:50%;left:50%;margin:-34px 0 0 -34px;border-radius:50%;box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;z-index:1000;background:#fff;cursor:pointer;font-family:'Exo 2', sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}#spin:after{content:"SPIN";text-align:center;line-height:68px;color:#CCC;text-shadow:0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3);position:relative;z-index:100000;width:68px;height:68px;display:block}#spin:before{content:"";position:absolute;width:0;height:0;border-style:solid;border-width:0 20px 28px 20px;border-color:transparent transparent #ffffff transparent;top:-12px;left:14px}#inner-spin{width:54px;height:54px;position:absolute;top:50%;left:50%;margin:-27px 0 0 -27px;border-radius:50%;background:red;z-index:999;box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset,rgba(0,0,0,0.4) 0px 0px 5px;background:rgb(255,255,255);background:-moz-radial-gradient(center, ellipse cover,rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%);background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1)));background:-webkit-radial-gradient(center, ellipse cover,rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);background:-o-radial-gradient(center, ellipse cover,rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);background:-ms-radial-gradient(center, ellipse cover,rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);background:radial-gradient(ellipse at center,rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 )}#spin:active #inner-spin{box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset}#spin:active:after{font-size:15px}#shine{width:250px;height:250px;position:absolute;top:0;left:0;background:-moz-radial-gradient(center, ellipse cover,rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%);background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0)));background:-webkit-radial-gradient(center, ellipse cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%);background:-o-radial-gradient(center, ellipse cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%);background:-ms-radial-gradient(center, ellipse cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%);background:radial-gradient(ellipse at center,rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );opacity:0.1}@-webkit-keyframes hh{0%, 100%{transform:rotate(0deg);-webkit-transform:rotate(0deg)}50%{transform:rotate(7deg);-webkit-transform:rotate(7deg)}}@keyframes hh{0%, 100%{transform:rotate(0deg);-webkit-transform:rotate(0deg)}50%{transform:rotate(7deg);-webkit-transform:rotate(7deg)}}.spin{-webkit-animation:hh 0.1s;animation:hh 0.1s}
I have used my own color scheme in this jquery spinner you can change that to your own scheme if you want.
So we have written HTML markup and customised it and now we will add some functionality in this project (Jquery Spinner Click To Spin).

To make this project (Jquery Spinner Click To Spin) work properly for that we will use JavaScript.

So here is a JavaScript code for our project (Jquery Spinner Click To Spin) and also save it with the filename as provided. Make a new directory called js and put this file to that directory.

The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Jquery Spinner Click To Spin/js/index.js :

//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0;
$(document).ready(function(){
/*WHEEL SPIN FUNCTION*/
$("#spin").click(function(){
//add 1 every click
clicks ++;
/*multiply the degree by number of clicks
generate random number between 1 - 360,
then add to the new degree*/
var newDegree = degree*clicks;
var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
totalDegree = newDegree+extraDegree;
/*let"s make the spin btn to tilt every
time the edge of the section hits
the indicator*/
$("#wheel .sec").each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 23.89){
console.log("<<<<<<<<");
$("#spin").addClass("spin");
setTimeout(function () {
$("#spin").removeClass("spin");
}, 100);
}
}, 10);
$("#inner-wheel").css({
"transform" : "rotate(" + totalDegree + "deg)"
});
noY = t.offset().top;
});
});
});//DOCUMENT READY
The code provided above is not js code it it jquery code you should know the difference of jquery and javascript.

At The End :

So here we are, We have done and our project Jquery Spinner Click To Spin is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.


  • Jquery Spinner Click To Spin
    • css
      • style.css
    • js
      • index.js
    • index.html

Download Project (Jquery Spinner Click To Spin) File :

Jquery Spinner Click To Spin.zip
File Size 4.37 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

I hope that you will like my this post and if you do then please share it with your friends and keep visiting this site for more this kind of projects and tutorials. I think you might like this jquery spinner.
Thank you !
Disqus Codes

No comments

Notifications

Disqus Logo