Отображается, если я наведите курсор мыши и осмотрю, но это вообще не видно. Изображение находится в той же папке. Я думаю, что все имена файлов правильные, но я не совсем уверен, в чем проблема. Пожалуйста, помогите, это только для базового c файла заметки.
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); } }