индикатор загрузки для блока
Есть сайт написанный на бутстрапе, нужно сделать прелоадер для блока, данные для которого берутся из открытой базы в формате json. При нажатии на кнопку данные подгружаются в блок. Собственно, вопрос. Как сделать при нажатии на кнопку преоладер? код js:
function gen_movie() {
// Константы наших полей, в которые будет передаваться информация
const movie_title = document.getElementById("movie_title");
const movie_poster = document.getElementById("movie_poster");
const movie_release_date = document.getElementById("movie_release_date");
const movie_plot = document.getElementById("movie_plot");
const movie_vote_average = document.getElementById("movie_vote_average");
const movie_vote_count = document.getElementById("movie_vote_count");
const movie_genre = document.getElementById("movie_genre");
const movie_director = document.getElementById("movie_director");
const movie_country = document.getElementById("movie_country");
const movie_actors = document.getElementById("movie_actors");
const movie_rate = document.getElementById("movie_rate");
const movie_runtime = document.getElementById("movie_runtime");
const movie_production = document.getElementById("movie_production");
$.getJSON("https://api.themoviedb.org/3/discover/movie?api_key=f256afadce3caeb124cc7dea618179d3&language=en-US&sort_by=vote_count.desc&page="+getRandomInt(51), function(data) {
let rand_item = getRandomInt(20 - 1);
movie_title.innerText = data.results[rand_item].title;
// Запрос в OMDb с целью получения нужной нам информации
// Почему используем ещё и её, а не только TMDb?
// Потому что OMDb предоставляет гораздо больше информации о фильмах, чем TMDb
$.getJSON("https://www.omdbapi.com/?apikey=7d89747a&t="+data.results[rand_item].title, function(data) {
// Передаем все необходимые нам данные в поля
movie_director.innerText = data.Director;
movie_genre.innerText = data.Genre;
movie_country.innerText = data.Country;
movie_actors.innerText = data.Actors;
movie_release_date.innerText = data.Released;
movie_rate.innerText = data.Rated;
movie_poster.src = data.Poster;
movie_vote_average.innerText = data.Ratings[0].Value;
movie_vote_count.innerText = '('+data.imdbVotes+')';
movie_runtime.innerText = data.Runtime;
movie_production.innerText = data.Production;
movie_plot.innerText = data.Plot;
});
});
}html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Movies</title>
<link rel="stylesheet" href="../style.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="../img/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../revealator/fm.revealator.jquery.min.css">
</head>
<body style="background-color: #f8f8f8">
<div class="container-fluid">
<div class="header bg-dark">
<div class="dropdown navbar navbar-dark bg-dark float-sm-left">
<a class="btn navbar-toggler" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="navbar-toggler-icon"></span> </a>
<div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item text-info" href="books.html">Books</a> <a class="dropdown-item text-info" href="games.html">Games</a> </div>
</div>
<h1 class="name-company">
<a class="home-link" href="../index.html">
<span class="letter_standart">R</span>
<span class="letter_G">G</span>
<span class="letter_M">M</span>
<span class="letter_B">B</span>
<span class="letter_standart">Generator</span>
<img src="../img/logo.png" class="img-fluid logo-company" alt="">
</a>
</h1> </div>
<script src="jquery-3.4.1.min.js"></script>
<script src="scripts.js"></script>
<script src="../revealator/jquery-1.11.3.min.js"></script>
<script src="../revealator/fm.revealator.jquery.min.js"></script>
<div class="row justify-content-center pt-5 revealator-slideright revealator-once">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="card border-info mb-3 shadow bg-white rounded" style="max-width: 900px;" id="movies">
<div class="row no-gutters">
<div class="col-md-4 p-2"> <img id="movie_poster" src="../img/default-movie.jpg" class="card-img" alt="..."> </div>
<div class="col-md-8" id="generate_movie_div">
<div class="card-body">
<h5 id="movie_title" class="card-title">Movie Title</h5>
<div class="card-text">Release Date: <span id="movie_release_date"></span></div>
<div class="card-text">Country: <span id="movie_country"></span></div>
<div class="card-text">Production: <span id="movie_production"></span></div>
<div class="card-text">Director: <span id="movie_director"></span></div>
<div class="card-text">Genre: <span id="movie_genre"></span></div>
<div class="card-text">Rated: <span id="movie_rate"></span></div>
<div class="card-text">IMDb User Ratings: <span id="movie_vote_average"></span> <span id="movie_vote_count"></span></div>
<div class="card-text">Runtime: <span id="movie_runtime"></span></div>
<div class="card-text">Actors: <span id="movie_actors"></span></div>
<div class="card-text">Plot: <span id="movie_plot"></span></div>
<div class="button_movie btn_for_generate">
<button id="generate_movie" onclick="gen_movie()" href="generators/movies.html" class="btn btn-outline-info">Generate</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clr"></div>
<div class="footer fixed-bottom bg-dark ml-2 mr-2">
<p class="footer-text">© RGMB Generator 2020</p>
</div>
</div>
</body>
</html>