<form class="login">
	<h3>Account Login</h3>
	<p>Please enter a 4-digit PIN code</p>
	<fieldset>
		<ul class="pin-ui">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div class="mask"></div>
		<input type="password" inputmode="numeric" name="input-pin" class="input-pin">
		<input type="submit" class="submit">
	</fieldset>
</form>

<div class="hidden-links">
	<a href="https://boag.online" class="linkout" target="_blank">boag.online</a>
	<a href="#" class="reset">Reset</a>
</div>
$blue: #143968
$green: #7fd89a

*
	box-sizing: border-box
	user-select: none

body
	padding: 40px
	font-family: 'Poppins', sans-serif
	font-weight: 300
	font-size: 16px
	color: $blue
	background: $blue

body:before
	content: ""
	display: block
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: 100%
	background-image: linear-gradient(90deg,hsla(0,0%,100%,.2),transparent)

form.login
	position: absolute
	top: 50%
	left: 50%
	z-index: 5
	transform: translate(-50%, -50%)
	background: #fff
	padding: 40px
	display: flex
	flex-direction: column
	width: 400px
	max-width: 90%
	overflow: hidden
	text-align: center
	box-shadow: 0px 10px 30px -15px black
	border-radius: 5px
	transition: 400ms

	h3
		font-weight: 600
		font-size: 18px
		margin-bottom: 10px

	p
		opacity: 0.5

	fieldset
		display: flex
		flex-direction: column
		position: relative

		.mask
			position: absolute
			background: red
			top: calc(100% + 10px)
			left: 50%
			transform: translateX(-50%) scaleX(0)
			height: 100px
			width: 100%
			max-width: 130px
			z-index: 20
			background: white
			border-top: 1px solid #e0e0e0
			opacity: 0

		.mask.visible
			opacity: 1
			transition: 400ms 500ms
			transform: translateX(-50%) scaleX(1)

	.input-pin
		position: absolute
		left: -1000px

	.input-pin:focus
		outline: none

	input[type=submit]
		display: none

form.hide
	transform: translate(-50%,-50%) scale(1.1)
	opacity: 0
	pointer-events: none

.pin-ui
	display: flex
	flex-direction: row
	justify-content: center
	margin: 30px 0 0 0

	li
		width: 12px
		height: 12px
		background: #ddd
		border-radius: 100%
		margin: 0 6px
		transition: transform 200ms
		border: 1px solid rgba(0,0,0,0.1)
		will-change: transform

	li.on
		background: $green
		transform: scale(1.4)

	li.animate
		animation: pip 1s 1 forwards

.hidden-links
	position: absolute
	top: 50%
	left: 50%
	transform: translate(-50%, -50%)
	text-align: center

	a
		display: block
		color: white
		text-decoration: none

	.linkout
		font-weight: 600
		font-size: 24px
		text-shadow: 0 -1px rgba(0,0,0,0.5)

	.linkout:hover
		text-decoration: underline

	.reset
		margin-top: 20px
		opacity: 0.5


@keyframes pip
	0%
		transform: translateY(0) scale(1.4)
	60%
		transform: translateY(-75%) scale(1.4)
	99%
		opacity: 1
	100%
		opacity: 0
		transform: translateY(250%) scale(1.4)
		
View Compiled
const loginForm = document.querySelector('form.login');
const pinInput = document.querySelector('.input-pin');
const pinUI = document.querySelectorAll('.pin-ui li');
let numChars = 0;
let acceptInput = true;

pinInput.addEventListener('keydown',function(e){
	if(!acceptInput){
		e.preventDefault();
	}else{
		if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keycode >= 96 && e.keyCode <= 105)){
			// let it through
			numChars++;
		}else{
			e.preventDefault();
		}
	}
});

pinInput.addEventListener('keypress',function(){
	
	pinUI.forEach(function(el, i){
		if(numChars > i){
			el.classList.add('on');
		}else{
			el.classList.remove('on');
		}
	});
	
	if(numChars === 4){
		loginForm.querySelector('input.submit').click();
	}
});

loginForm.addEventListener('submit',function(e){
	e.preventDefault();
	
	acceptInput = false;
	
	pinInput.blur();
	
	document.querySelector('.mask').classList.add('visible');

	pinUI.forEach(function(el, i){
		setTimeout(function(){
			el.classList.add('animate');
		}, 300*i);
	});
	
	setTimeout(function(){
		document.querySelector('.login').classList.add('hide');
	}, 2000);
	
});

document.querySelector('.reset').addEventListener('click',function(e){
	e.preventDefault();
	resetAll();
});

function resetAll(){
	pinUI.forEach(function(el, i){
		el.classList.remove('on','animate');
	});
	numChars = 0;
	acceptInput = true;
	pinInput.value = "";
	document.querySelector('.mask').classList.remove('visible');
	document.querySelector('.login').classList.remove('hide');
}

pinInput.focus();
document.addEventListener('click',function(){
	pinInput.focus();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.