hubspot optinmonster form loading indicator

om-hubspot-loading-form.html

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>-->
<!--[if lte IE 8]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<!--[endif]-->
<script>
document.addEventListener('om.Campaign.afterShow', function(event) {
	jQuery.getScript("//js.hsforms.net/forms/v2.js", function() {
		hbspt.forms.create({
			portalId: "<HS_PORTAL_ID>",
			formId: '<HS_FORM_ID>',
			target: '#om-{{id}}-optin .custom-hubspot-form',
			onBeforeFormInit(ctx){
				console.log('ctx', {ctx});
				jQuery('#om-{{id}}-optin .custom-hubspot-form-loading').removeClass('custom-hubspot-form-loading');
			},
			onFormSubmit($form, ctx){
				om{{id}}.Listeners.convert();
				om{{id}}.startClose();
			}
		});
	});
});
</script>
<style>
	@keyframes omformspinner {
		0% {
			transform: translate3d(-50%, -50%, 0) rotate(0deg);
		}
		100% {
			 transform: translate3d(-50%, -50%, 0) rotate(360deg);
		}
	}

	#om-{{id}}-optin .custom-hubspot-form {
		background: #fff;
	}

	#om-{{id}}-optin .custom-hubspot-form-loading {
		min-height: 550px;
		position: relative;
		transition: opacity linear 0.1s;
	}

	#om-{{id}}-optin .custom-hubspot-form-loading:after {
		animation: 2s linear infinite omformspinner;
		border: solid 3px #eee;
		border-bottom-color: #54d9ff;
		border-radius: 50%;
		content: "";
		height: 40px;
		left: 50%;
		opacity: inherit;
		position: absolute;
		top: 200px;
		transform: translate3d(-50%, -50%, 0);
		transform-origin: center;
		width: 40px;
		will-change: transform;
	}
</style>
<div class="custom-hubspot-form-wrapper custom-hubspot-form-loading"><div class="custom-hubspot-form"></div></div>