How would I fade in and out Bootstrap 5.3 Spinner after it loads?

Question

I did a little bit of research on spinners that work in Bootstrap and I found some code. Here it is.

function getData() {
         var spinner = document.getElementById("spinner");
         spinner.style.display = "block";
         setTimeout(function () {
            fetch("https://jsonplaceholder.typicode.com/posts")
            .then((response) => response.json())
            .then((data) => {
               data.forEach((item) => {
                  var div = document.createElement("div");
                  var p = document.createElement("p");
                  p.innerText = item.title;
                  div.appendChild(p);
                  document.getElementById("dataContainer").appendChild(div);
               });
               spinner.style.display = "none";
            });
         }, 5000);
      }
      getData();

<!-- begin snippet: js hide: false console: true babel: false -->

#spinner {
  position: absolute;
  top: 49%;
  left: 47%;
  width: 3.5rem;
  height: 3.5rem;
  /* transform: translate(-50%, -50%); */
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Spinner Tutorial</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>

<body>
  <div class="spinner-border m-5" role="status" id="spinner">
    <span class="visually-hidden">Loading...</span>
  </div>
  <div id="dataContainer"></div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

I'm going for it to smoothly fade in and out for aesthetics. I looked through some other questions here on StackOverflow, but it didn't help out that much. Let me know what I can do.

com.on.ist · Answer 1 · 2023-06-02T19:45:24.193

Here is a solution with a simple CSS transition. I add and remove the class "hidespinner" to show and hide it.

Here is a explanation for the little trick with the css animation: https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/

function getData() {
         var spinner = document.getElementById("spinner");
         spinner.classList.remove('hidespinner'); // <- new
         setTimeout(function () {
            fetch("https://jsonplaceholder.typicode.com/posts")
            .then((response) => response.json())
            .then((data) => {
               data.forEach((item) => {
                  var div = document.createElement("div");
                  var p = document.createElement("p");
                  p.innerText = item.title;
                  div.appendChild(p);
                  document.getElementById("dataContainer").appendChild(div);
               });
               spinner.classList.add('hidespinner'); // <- new
            });
         }, 5000);
      }
      getData();

<!-- begin snippet: js hide: false console: true babel: false -->

#spinner {
  position: absolute;
  top: 49%;
  left: 47%;
  width: 3.5rem;
  height: 3.5rem;
  /* transform: translate(-50%, -50%); */
  /* new code */
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

#spinner.hidespinner {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Spinner Tutorial</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>

<body>
  <div class="spinner-border m-5 hidespinner" role="status" id="spinner"><!-- added class "hidespinner" here to initial hide the element -->
    <span class="visually-hidden">Loading...</span>
  </div>
  <div id="dataContainer"></div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

How would I fade in and out Bootstrap 5.3 Spinner after it loads?

1 Answers1