Hesapla Butonuna " Hesaplanıyor " Nasıl eklenir ?

Evet ; setTimeout() ile delay yapılıyor ama sadece delay bir gif veya hesaplanıyor v.b yapamadım. Yardımcı olursanız örnek atarsanız sevinirim.

Arkadaşlar örnek bir hesaplama kodlama ;

h1>Javascript Basit Hesap Makinesi</h1>
     
    <label>Küçük sayı : </label>
    <input type="number" id="sayi1">
 
    <select id="islem">
        <option value="topla">+</option>
        <option value="cikar">-</option>
        <option value="carp">*</option>
        <option value="bol">/</option>
    </select>
 
    <label>Büyük sayı : </label>
    <input type="number" id="sayi2">
 
    <button id="buton">Sonucu Bul</button>
 
    <div id="sonuc"></div>
     
    <script>
        var sonuc;
        function hesapla(){
            var sayi1=document.getElementById("sayi1").value;
            var sayi2=document.getElementById("sayi2").value;
            var islem=document.getElementById("islem").value;
     
            var s1 = Number(sayi1);
            var s2 = Number(sayi2);
 
            if(islem == 'topla')
                sonuc = s1 + s2;
            else if(islem == 'cikar')
                sonuc = s1 - s2;
            else if(islem == 'carp')
                sonuc = s1 * s2;
            else
                sonuc = s1 / s2;
 
            document.getElementById("sonuc").innerHTML = "Sonuc : " + sonuc;
        }
 
        var hesaplaBtn=document.getElementById("buton");
        hesaplaBtn.onclick=hesapla;
 
    </script>

anladigim kadariyla bir ornek olusturdum; araya bir fonksiyon daha ekleyerek hesaplamanin bittigini algilayabilirsin..

<h1>Javascript Basit Hesap Makinesi</h1>
     
    <label>Küçük sayı : </label>
    <input type="number" value="4" id="sayi1">
 
    <select id="islem">
        <option value="topla">+</option>
        <option value="cikar">-</option>
        <option value="carp">*</option>
        <option value="bol">/</option>
    </select>
 
    <label>Büyük sayı : </label>
    <input type="number" value="88" id="sayi2">
 
    <button id="buton">Sonucu Bul</button>
 
    <div id="sonuc"></div>
     
    <script>
        var sonuc;
          function hesapla(){
            return new Promise(resolve => {
              var sayi1=document.getElementById("sayi1").value;
              var sayi2=document.getElementById("sayi2").value;
              var islem=document.getElementById("islem").value;

              var s1 = Number(sayi1);
              var s2 = Number(sayi2);

              if(islem == 'topla')
                  sonuc = s1 + s2;
              else if(islem == 'cikar')
                  sonuc = s1 - s2;
              else if(islem == 'carp')
                  sonuc = s1 * s2;
              else
                  sonuc = s1 / s2;

              /*
                hesaplama cok kisa surede tamamlandigi icin 
                1 saniye sonucu geciktirdim ornek olmasi acisindan..
              */ 
              setTimeout(()=>{
                resolve(sonuc);
              }, 1000)
            })
        }
      
      function hesaplamayaBasla() {
        document.getElementById("sonuc").innerHTML = "Hesaplanıyor...";
        hesapla().then((sonuc)=>{
          document.getElementById("sonuc").innerHTML = "Sonuc : " + sonuc;
        })
      }
 
        var hesaplaBtn=document.getElementById("buton");
        hesaplaBtn.onclick=hesaplamayaBasla; 
    </script>

onceki mesajimi duzenleyemiyorum..

calisan link : https://jsbin.com/pavuwiwegu/edit?html,output

onurcelik adlı üyeden alıntı

onceki mesajimi duzenleyemiyorum..

calisan link : https://jsbin.com/pavuwiwegu/edit?html,output

 

teşekkür ediyorum sabit bir çıktı yazılıyor ama bunu geri sayım yapabiliyormuyuz. Her yaptığımda farklı sorunla karşılaştımda. Hesaplanıyor 10'dan geriye saysın mesela.