Jquery UI Loading Spinner Example | Spinner In Jquery Example

jQuery · 11-Apr-2023

Hi Guys,

In this example,I will learn you how to show loading spinner in jquery.you can easy to create spinner in jquery ui.

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 - Nicesnippets.com</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>

It will help you....