Even though it shows up when I hover over and inspect, the image remains completely invisible. It's saved in the same folder and I believe all the file names are correct, but for some reason, it's just not working as expected. Any help would be greatly appreciated since this is only for a basic note file.
JS:
const renderLoader = parent => {
const loader = `
<div class="loader">
<svg>
<use href="32. spinner.png"></use>
</svg>
</div>
`
document.querySelector(parent).insertAdjacentHTML('afterbegin', loader);
}
HTML
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="32. loading spinner.css">
<script src="32. loading spinner.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Loading spinner Notes</title>
</head>
<body>
<div class="results">
<h1>RESULTS DIV</h1>
</div>
<div class="answers">
<h1>ANSWERS DIV</h1>
</div>
<!-- EVERYTHING IS WORKING BUT THE SPINNER IS NOT SHOWING THE IMAGE -->
<input value="load spinner for results" type="submit" onClick="renderLoader('.results')">
<input value="load spinner for answers" type="submit" onClick="renderLoader('.answers')">
<h1>Look at console</h1>
</body>
</html>
CSS
.loader {
margin: 5rem auto;
text-align: center; }
.loader svg {
height: 5.5rem;
width: 5.5rem;
/* fill: #F59A83; */
transform-origin: 44% 50%;
animation: rotate 1.5s infinite linear; }
@keyframes rotate {
0% {
transform: rotate(0); }
100% {
transform: rotate(360deg); } }