geekman/pin-entry-anim.html

## pin-entry-anim.html
<!-- PIN entry animation -->
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body>
	<style>

	.h {
		position: relative;
		white-space: nowrap;
	}
	.h > * { position: absolute; }
	.h > input {
		opacity: .5;
		width: 50%;
		left: -9999em;
	}

	#f {
		padding: .5em;
		border: 1px solid transparent;
		border-radius: 10px;
	}
	#f.focused {
		border-color: #ccc;
	}

	.d {
		display: inline-block;
		background-color: black;

		--d-lineheight: 3px;
		--d-linewidth:  20px;
		--d-ballsize: 12.5px;
		--d-margins: .3em;

		width:  var(--d-linewidth);
		height: var(--d-lineheight);
		margin: calc((var(--d-ballsize) - var(--d-lineheight)) / 2)
			var(--d-margins);
		transition: all .05s;
	}

	.d.filled {
		margin: 0 calc(var(--d-margins) + (var(--d-linewidth) - var(--d-ballsize)) / 2);

		border-radius: 50%;
		height: var(--d-ballsize);
		width:  var(--d-ballsize);
	}

	</style>

	<div class="h">
		<div id="f">
			<div class="d"></div>
			<div class="d"></div>
			<div class="d"></div>
			<div class="d"></div>
			<div class="d"></div>
			<div class="d"></div>
		</div>
		<input type="number" pattern="[0-9]*" autocomplete="off">
	</div>

	<script>
		var f = document.getElementById('f');
		var digits = f.querySelectorAll('.d');

		function addClass(e, klass) {
			if (e.className.indexOf(klass) <  0) e.className += ' ' + klass;
		}

		function fill(list, len) {
			for (var i = 0; i < list.length; i++) {
				i < len ? addClass(list[i], 'filled') : removeClass(list[i], 'filled');
			}
		}

		function removeClass(e, klass) {
			var c = e.className;
			c = c.replace(new RegExp(`\\b${klass}\\b`), ' ');
			c = c.replace(/\s+/, ' ');
			e.className = c;
		}

		var input = f.parentNode.querySelector('INPUT');
		input.addEventListener('keyup', function(ev) {
			fill(digits, ev.target.value.length);
		});

		f.addEventListener('click', function(ev) {
			input.focus();
		});

		// assist user with determining field focus
		input.addEventListener('focus', function(ev) { addClass(f, 'focused'); });
		input.addEventListener('blur',  function(ev) { removeClass(f, 'focused'); });
	</script>
</body>
</html>
	<!-- PIN entry animation -->
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<style>

	.h {
	position: relative;
	white-space: nowrap;
	}
	.h > * { position: absolute; }
	.h > input {
	opacity: .5;
	width: 50%;
	left: -9999em;
	}

	#f {
	padding: .5em;
	border: 1px solid transparent;
	border-radius: 10px;
	}
	#f.focused {
	border-color: #ccc;
	}

	.d {
	display: inline-block;
	background-color: black;

	--d-lineheight: 3px;
	--d-linewidth: 20px;
	--d-ballsize: 12.5px;
	--d-margins: .3em;

	width: var(--d-linewidth);
	height: var(--d-lineheight);
	margin: calc((var(--d-ballsize) - var(--d-lineheight)) / 2)
	var(--d-margins);
	transition: all .05s;
	}

	.d.filled {
	margin: 0 calc(var(--d-margins) + (var(--d-linewidth) - var(--d-ballsize)) / 2);

	border-radius: 50%;
	height: var(--d-ballsize);
	width: var(--d-ballsize);
	}

	</style>

	<div class="h">
	<div id="f">
	<div class="d"></div>
	<div class="d"></div>
	<div class="d"></div>
	<div class="d"></div>
	<div class="d"></div>
	<div class="d"></div>
	</div>
	<input type="number" pattern="[0-9]*" autocomplete="off">
	</div>

	<script>
	var f = document.getElementById('f');
	var digits = f.querySelectorAll('.d');

	function addClass(e, klass) {
	if (e.className.indexOf(klass) < 0) e.className += ' ' + klass;
	}

	function fill(list, len) {
	for (var i = 0; i < list.length; i++) {
	i < len ? addClass(list[i], 'filled') : removeClass(list[i], 'filled');
	}
	}

	function removeClass(e, klass) {
	var c = e.className;
	c = c.replace(new RegExp(`\\b${klass}\\b`), ' ');
	c = c.replace(/\s+/, ' ');
	e.className = c;
	}

	var input = f.parentNode.querySelector('INPUT');
	input.addEventListener('keyup', function(ev) {
	fill(digits, ev.target.value.length);
	});

	f.addEventListener('click', function(ev) {
	input.focus();
	});

	// assist user with determining field focus
	input.addEventListener('focus', function(ev) { addClass(f, 'focused'); });
	input.addEventListener('blur', function(ev) { removeClass(f, 'focused'); });
	</script>
	</body>
	</html>