Showing a simple loading animation before fetching data

Question

These are the codes i used to receive data from API but there is a feature i want to add but i don't know how.

I want to add a loading animation before fetching data from API

Do anybody knows how can i make it?

I have tried a of ways to make it but none of them worked properly.

//variables from html
var city = document.querySelector('#city')
var myCity = document.querySelector('#myCity')
var temp = document.querySelector('#temp')
var desc = document.querySelector('#desc')
var box = document.querySelector('.tempBox')


console.log(city)
var myVar;

//this is the api key
var myId = '006eee17b0b83d4de4dfca972d666b87'

function getCityTemp(){
  var a = city.value
  getData(a)

}

 //function to get the name of the city and the weather
function getData(newCity){
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${newCity}&appid=${myId}`)
   .then(function(res){
       return res.json() 
})  

  //the function used to receive specific data
   .then(function(data){
      myCity.textContent = data.name
      temp.textContent = data.main.temp
      weather.textContent = data.weather[0].description
      wind.textContent = data.wind.speed
      sunrise.textContent = data.sys.sunrise
      box.style.display = 'block'
})
    .catch(function(err){
        console.log(err)
    })}

.container{
    border: none;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 5px;
    margin: 3rem 10rem;
}

.cityName{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    background-color: aqua;
    padding: 7px;
    border-radius: 20px;
    margin-left: 38rem;
    margin-right: 38rem;
}

.input1{
    border: none;
    border-radius: 5px;
    padding: 7px;
   margin-top: 1em; 
   margin-left: 25rem;
   margin-right: 25rem;
    margin-bottom: 1rem;
}
.button1{
    margin-bottom: 10px;
    margin-right: 27rem;
    margin-left: 27rem;
    color: azure;
    background-color: indigo;
    border: none;
    padding: 10px;
    border-radius: 5px;
    transition: 0.5s;
}
.button1:hover{
    color: aqua;
    background-color: black;
    transition: 0.5s;
}

.tempBox{
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    background-color : greenyellow;
    margin-top: 5em;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-left: 30rem;
    margin-right: 30rem;
    display: none;
}
body{
    background-color: #7267CB;
}

img{
    border-radius: 40px;
    margin-left: 46%;
    width: 100px;
}
p {
    margin-left: 7em;
}

.CityName {
    margin-left: -10px;
    border-radius: 20px;
    padding: 5px;
    color: black;
    background-color: #E2C2B9;
}
#myCity {
    margin-left: 20px;
    border-radius: 20px;
    padding: 5px;
    background-color: #DD4A48;
}

.Temp{
    margin-left: -10px;
    border-radius: 20px;
    padding: 5px;
    color: black;
    background-color: #E2C2B9;
}
#temp{
    margin-left: 20px;
    border-radius: 20px;
    padding: 5px;
    background-color: #DD4A48;
}
.Weather1{
    margin-left: -10px;
    border-radius: 20px;
    padding: 5px;
    color: black;
    background-color: #E2C2B9;
}

#weather {
    margin-left: 20px;
    border-radius: 20px;
    padding: 5px;
    background-color: #DD4A48;
}
.Wind {
    margin-left: -10px;
    border-radius: 20px;
    padding: 5px;
    color: black;
    background-color: #E2C2B9;
}
#wind {
    margin-left: 20px;
    border-radius: 20px;
    padding: 5px;
    background-color: #DD4A48;
}
.Sunrise {
    margin-left: -10px;
    border-radius: 20px;
    padding: 5px;
    color: black;
    background-color: #E2C2B9;
}
#sunrise {
    margin-left: 20px;
    border-radius: 20px;
    padding: 5px;
    background-color: #DD4A48;
}

html {
    height: 100%;
  }
  
  body {
    background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>

    <link rel="stylesheet" href="weather.css">
</head>
<body>
    <img src="https://www.vmcdn.ca/f/files/via/images/weather/rain-umbrella-vancouver-weather.jpg;w=960" alt="weatherImage">
    <label class="cityName" for="city">City Name:</label>
    <div class="container">
        <input class="input1" type="text" id="city"/>
        <button class="button1" type="button" onclick="getCityTemp()">Result</button>
        <div id="loading"></div>
    </div>

    <div class="tempBox">
        <p><span class="CityName">City Name : </span><span id="myCity"></span></p>
        <p><span class="Temp">Temp : </span><span id="temp"></span></p>
        <p><span class="Weather1">Weather : </span><span id="weather"></span></p>
        <p><span class="Wind">Wind : </span><span id="wind"></span></p>
        <p><span class="Sunrise">Sunrise : </span><span id="sunrise"></span></p>
    </div>
    <script src="weather.js"></script>
</body>
</html>

And also : this is the output

At the moment your question may be too vague to attract good quality answers, so you might be better to explain what you have tried, and what happened - thanks — Martin CR, Dec 26 '21 at 14:05

score 0 · Answer 1 · answered Dec 23 '21 at 13:59

create a function displayLoading and hideLoading for show and hide loader and set timeout on it, and then call displayLoading when api is called and call hideLoading after getting response

    var city = document.querySelector('#city')
    var myCity = document.querySelector('#myCity')
    var temp = document.querySelector('#temp')
    var desc = document.querySelector('#desc')
    var box = document.querySelector('.tempBox')
    
    
    console.log(city)
    var myVar;
    
    //this is the api key
    var myId = '006eee17b0b83d4de4dfca972d666b87'
    
    function getCityTemp(){
      var a = city.value
      getData(a)
    
    }
     const loader = document.querySelector("#loading");
        
     // showing loading
        function displayLoading() {
            loader.classList.add("display");
            // to stop loading after some time
            setTimeout(() => {
                loader.classList.remove("display");
            }, 3000);
        }

    // hide loading
        function hideLoading() {
             loader.classList.remove("display");
        }  
          

    //call here
          function getData(newCity){
            displayLoading()
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${newCity}&appid=${myId}`)
               .then(res => res.json())
            }
               .then(json => {
                    hideLoading()
                }
           ) 



    /* creating css loader */
    
    #loading {
        width: 2rem;
        height: 2rem;
        border: 5px solid #f3f3f3;
        border-top: 6px solid #9c41f2;
        border-radius: 100%;
        margin: auto;
        visibility: hidden;
        animation: spin 1s infinite linear;
    }
    #loading.display {
        visibility: visible;
    }
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

Thanks but i can't receive any data and even the loader won't show up because the function(data) is missing. @JunaidShaikh — Naeim Khorram, Dec 23 '21 at 14:24
try refering this https://stackoverflow.com/questions/64910839/require-function-not-working-with-image-in-react — Junaid Shaikh, Dec 24 '21 at 05:03

Showing a simple loading animation before fetching data

1 Answers1