Loader-Demo

index.html

<div id="button1">
  <button class="button" id="moviesfromapi" onclick="fetchApi()">Display</button>
</div>
<div hidden id="spinner"></div>

<div id="movieResult"></div>

loader-demo.markdown

Loader-Demo

A Pen by Roger Colque Calcina on CodePen.

License.

script.js

const movieApi_url =
  "https://gist.githubusercontent.com/saniyusuf/406b843afdfb9c6a86e25753fe2761f4/raw/523c324c7fcc36efab8224f9ebb7556c09b69a14/Film.JSON";

const pokemonlist = "https://www.pokemon.com/us/api/pokedex/kalos";

const spinner = document.getElementById("spinner");

//   spinner.classList.add('show');
//   // ...
//   spinner.classList.remove('show');
const fetchApi = () => {
  //let loader = `<div class="boxLoading"></div>`;
  // document.getElementById("movieResult").innerHTML = loader;
  // spinner.classList.add('show');
  spinner.removeAttribute("hidden");
  fetch(pokemonlist, { mode: "no-cors" }) // no-cors, *cors, same-origin})
    .then((response) => response.json())
    .then(function (data) {
      spinner.setAttribute("hidden", "");
      let result = `<h2> Movies </h2>`;
      data.forEach((data) => {
        // const { imdbID, Title, Year, imdbRating, Genre, Runtime,Images } = movie;
        const {
          id,
          name,
          weight,
          detailPageURL,
          height,
          ThumbnailAltText,
          ThumbnailImage
        } = data;
        result += `<div>
                    <h5> Movie ID: ${id} </h5>
                    <ul
                        
                        <li>Movie name: ${name}</li>
                        <li>Movie weight: ${weight}</li>
                        <li>Movie note on IMDB: ${detailPageURL}</li>
                        <li>Movie height: ${height}</li>
                        <li>Movie ThumbnailAltText: ${ThumbnailAltText}</li>
                        
                        <img class='movie_image' src='${ThumbnailImage}' >
                       
                    </ul>
                </div>`;
        document.getElementById("movieResult").innerHTML = result;
      });
    });
};

style.scss

#spinner:not([hidden]) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#spinner::after {
  content: "";
  width: 80px;
  height: 80px;
  border: 2px solid #f3f3f3;
  border-top: 3px solid #f25a41;
  border-radius: 100%;
  will-change: transform;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.movie_image {
  object-fit: cover;
  width: 150px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" rel="stylesheet" />