Simple spinner

Developer
Leo
Size
2,358 Kb
Views
16,192
  1. Simple spinner Previews
  2. Simple spinner HTML Codes
  3. Simple spinner CSS Codes
  4. Simple spinner JS Codes

How do I make an simple spinner?

What is a simple spinner? How do you make a simple spinner? This script and codes were developed by Leo on 16 October 2022, Sunday.

Simple spinner Previews
IQ Test

Simple spinner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple spinner</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form> <input type="number" min="1" max="10" value="1" />
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple spinner - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:400);
body { background: #25323B;
}
form {	position: absolute;	margin: auto;	top: 0; left: 0; bottom: 0; right: 0;	width: 150px;	height: 50px;
}
input[type=number] {	float: left;	width: 70px;	height: 35px;	padding: 0;	font-family: Lato;	font-weight: 700;	font-size: 1.2em;	text-transform: uppercase;	text-align: center;	color: #93504C;	border: 2px #93504C solid;	background: none;	outline: none;	pointer-events: none;
}
span.spinner {	position: absolute;	height: 40px;	user-select: none;	-ms-user-select: none;	-moz-user-select: none;	-webkit-user-select: none;	-webkit-touch-callout: none;
}
span.spinner > .sub, span.spinner > .add {	float: left;	display: block;	width: 35px;	height: 35px;	text-align: center;	font-family: Lato;	font-weight: 700;	font-size: 1.2em;	line-height: 33px;	color: #93504C;	border: 2px #93504C solid;	border-right: 0;	border-radius: 2px 0 0 2px;	cursor: pointer;	transition: 0.1s linear;	-o-transition: 0.1s linear;	-ms-transition: 0.1s linear;	-moz-transition: 0.1s linear;	-webkit-transition: 0.1s linear;
}
span.spinner > .add {	top: 0;	border: 2px #93504C solid;	border-left: 0;	border-radius: 0 2px 2px 0;
}
span.spinner > .sub:hover, span.spinner > .add:hover {	background: #93504C;	color: #25323B;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {	-webkit-appearance: none;
}

Simple spinner - Script Codes JS Codes

(function($) {	$.fn.spinner = function() {	this.each(function() {	var el = $(this);	// add elements	el.wrap('<span class="spinner"></span>');	el.before('<span class="sub">-</span>');	el.after('<span class="add">+</span>');	// substract	el.parent().on('click', '.sub', function () {	if (el.val() > parseInt(el.attr('min')))	el.val( function(i, oldval) { return --oldval; });	});	// increment	el.parent().on('click', '.add', function () {	if (el.val() < parseInt(el.attr('max')))	el.val( function(i, oldval) { return ++oldval; });	}); });	};
})(jQuery);
$('input[type=number]').spinner();
Simple spinner - Script Codes
Simple spinner - Script Codes
Home Page Home
Developer Leo
Username leonard
Uploaded October 16, 2022
Rating 3.5
Size 2,358 Kb
Views 16,192
Do you need developer help for Simple spinner?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Leo (leonard) Script Codes
Name
Mouse scroll
Notification animation collection
Strings
Phyramid.com loader
Spinner
Time left icon
Flat checkbox toggle
Stepper
Photo selector with bounce animation
Triangle
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!