styles.css

.slide-note-loading-hook {
	display: flex;
	width: 100%;
	height: 300px;
	color: black;
	align-items: center;
	justify-content:center;
	border-radius: 8px;
	background-image: linear-gradient(to bottom right, #5761B2, #1FC5A8);
}

.loader {
	display: inline-block;
	width: 80px;
	height: 80px;
}

.loader:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid dodgerblue;
	border-color: #305293 transparent #CCEEFFFF transparent;
	animation: loader 1.2s linear infinite;
}

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

.slide-note-canvas-layer {
	cursor: default;
}

.slide-note-text-layer {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	opacity: 0.8;
	line-height: 1.0;
}

.slide-note-text-layer > span {
	cursor: text;
	color: transparent;
	position: absolute;
	overflow: hidden;
	white-space: nowrap;
	transform-origin: 0% 0%;
}