In this tutorial, we will learn Jquery UI Loading Spinner Example | Spinner In Jquery Example


Spinner in jQuery UI is used to increase or decrease the value by using arrow keys or by using up/down buttons. It allows users to type a value directly, or modify an existing value by spinning with the keyboard, mouse or scrollwheel.

Example :


<!doctype html>
<html lang="en">
<head>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<title>jQuery UI Spinner</title>
  	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script>
  	<style type="text/css">
  		.main-div{
  			margin: 0 auto;
  			padding:20px 10px 20px 30px;
  			width:30%;
  			border:2px solid green;
  		}
  		button{
  			width:190px;
  		}
  		input{
  			width:235px;
  		}
  		label{
  			font-size:18px;
  		}
  		h1{
  			text-align: center;
  		}
  	</style>
</head>
<body>
<h1>JQuery UI Spinner Example - rathorji.in</h1>
<div class="main-div">
	<p>
	  	<label for="spinner">Select a value:</label>
	  	<input id="spinner" name="value">
	</p>
	<p>
	  	<button id="disable">Toggle disable/enable</button>
	  	<button id="destroy">Toggle widget</button>
	</p>
	<p>
	  	<button id="getvalue">Get value</button>
	  	<button id="setvalue">Set value to 5</button>
	</p>
</div>
<script>
  	$( function() {
    	var spinner = $( "#spinner" ).spinner();
	    $( "#disable" ).on( "click", function() {
	      	if ( spinner.spinner( "option", "disabled" ) ) {
	        	spinner.spinner( "enable" );
	      	} else {
	        	spinner.spinner( "disable" );
	      	}
	    });
	    $( "#destroy" ).on( "click", function() {
	     	if ( spinner.spinner( "instance" ) ) {
	        	spinner.spinner( "destroy" );
	      	} else {
	        	spinner.spinner();
	      	}
	    });
	    $( "#getvalue" ).on( "click", function() {
	      	alert( spinner.spinner( "value" ) );
	    });
	    $("#setvalue" ).on( "click", function() {
	      	spinner.spinner( "value", 5 );
	    });
    	$( "button" ).button();
  	});
  </script>
</body>
</html>


May this example help you.