JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<form action="/" id="js-form-post" class="is-loading">
  <input type="text">
  <input type="file">
	
	<button type="submit">submit</button>
</form>

SCSS

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

$spin-duration: .92s;
$pulse-duration: 750ms;

.is-loading {
	$icon-size: 2.5em;
	overflow: hidden;

	&:before {
		content: '';
		background-color: rgba(256, 256, 256, .84);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
	}

	&:after {
		content: '';
		position: absolute;
		top: calc(50% - 19px);
		left: calc(50% - 19px);
		border-radius: 50%;
		border: .45rem solid deeppink;
		border-top-color: deepskyblue;
		animation: spin $spin-duration infinite linear;
		height: $icon-size;
		width: $icon-size;
		z-index: 11;
	}
}

JavaScript

const form = document.querySelector('#js-form-post');

form.addEventListener('submit', function(event) {
	event.preventDefault();
	
	const inputs = form.querySelectorAll('input[type="file"]');
	if (inputs.length > 0) {
		for (input of inputs) {
			if (!input.value) {
				input.setAttribute('disabled', '');
			}
		}
	}
});