Получить API css-загрузчик

Question

Я использую API выборки для доступа к JSON-объекту.

Мои вопросы: как я могу внедрить загрузчик css до отображения фактических данных?И как мне узнать, что данные были отображены?

Вот что я пробовал:

var startSevenDaysInterval = (new Date).getTime();
var endSevenDaysInterval = startSevenDaysInterval - 604800000;
function fetchData2() {
    fetch('https://vannovervakning.com/api/v1/measurements/3/' + endSevenDaysInterval + '/' + startSevenDaysInterval + '/')
        .then(function (response) {
            if(response === 404){
                document.getElementById("loader").style.display = 'none';
            }
            return response.json();
        })
        .then(function (data) {
            document.getElementById("loader").style.display = 'none';
            printTemperature(data);
        });
}
function printTemperature(data) {
    var html = "<h5>";
    html += data.data["TEMPERATURE"][0].value;
    html += "</h5>";
    document.getElementById('temp1').innerHTML = html;
}
setInterval(function () {
    fetchData2();
}, 1000);

Мой загрузчик выглядит так:

.loader {
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #e0e0e0;
border-radius: 30px;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}

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

И мой HTML выглядит так:

<div class="tempVal">
    <div class="loader"></div>
    <div id="temp1"></div>
</div>

Answer 1

Вы уже делаете это, но используете getElementById для класса (это только для идентификаторов). Когда вы не уверены в этих вещах, убедитесь, что у вас действительно есть нужный элемент, например. используя оператор debugger или console.log(document.getElementById("loader")).

Получить класс с querySelector, который может обрабатывать все селекторы CSS:

document.querySelector('.loader').style.display = 'none'

Обратите внимание, если у вас есть несколько классов с таким именем, он получит первый. Вам не нужно повторять это в обоих .then.