<style>
.counter {
  position: absolute;
  top:25px;
  left:25px;
  display:flex;
  font-family: 'Open Sans', sans-serif;
  opacity:0.8;
  * {
    overflow:hidden;
  }
  .tot {
    background-color:#000;
    color:rgba(255,255,255,0);
    padding:0px 6px 1px 6px;
    font-size:24px;
    transition:.5s ease, color .25s ease;
    width:0px;
  }
  .name {
    color:rgba(0,0,0,0);
    height:34px;
    font-size:24px;
    padding:0px 6px 1px 6px;
    background-color:#E5E5E5;
    box-shadow:inset 0 -4px 0 0 #E7501E;
    transition:.5s ease, color .25s ease;
    width:0px;
  }
}
.secret {
  top:25px;
  left:25px;
  display:flex;
  font-family: 'Open Sans', sans-serif;
  opacity:0;
  .sectot {
    background-color:#000;
    color:#fff;
    padding:0px 6px 1px 6px;
    font-size:24px;
    transition:width 1.5s ease, color 1.5s ease;
  }
  .secname {
    height:34px;
    position: relative;
    font-size:24px;
    padding:0px 6px 1px 6px;
    background-color:#E5E5E5;
    box-shadow:inset 0 -4px 0 0 #E7501E;
    transition:width 1.5s ease, color 1.5s ease;
  }
}  
</style>  
<!-- Eigene Seite mit Spendeninfos -->
<a href="https://le-dernier-du-clan-loreth.xobor.de/donations.html">
  
<div class="counter">
  <div class="tot">�</div>
  <div class="name"></div>
</div>
</a>
 
<!-- Weil ich kann :O) -->
<div class="secret"><div class="sectot">�</div><div class="secname"></div></div> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
<script>
//bei der zahl 5 kann man den betrag angeben der gepsendet wurde  
//bei   "(Annonymous)" kann der Spender eingetragen werden.
var donations = [
  [5, "(Annonymous)"],
  [5, "(Annonymous)"],
  [5, "(Annonymous)"],
  [5, "(Annonymous)"],
  [5, "Lui"],
  
];
var donationnumber = -1;
//Hier kann man den guthaben angeben den man schon hat also geldbetrag.
//hat mann keins setzt man es auf null.  
var total = 0;
 
init();
 
//setTimeout(loadname,5000);
//setTimout(setloading())
 
function init() {
  $(".sectot").text("Total");
  $(".tot").css("color", "rgba(255,255,255,0)");
  $(".tot").css("width", ($(".sectot").width() + "px"));
  setTimeout(function(){$(".tot").text("Total");},500);
  setTimeout(function(){$(".tot").css("color", "rgba(255,255,255,1)");},500);
  $(".secname").text("$" + addCommas(total));
  $(".name").css("color", "rgba(0,0,0,0)");
  $(".name").css("width", ($(".secname").width() + "px"));
  setTimeout(function(){$(".name").text("$" + addCommas(total));},500);
  setTimeout(function(){$(".name").css("color", "rgba(0,0,0,1)");},500);
  donationnumber++;
  setTimeout(loadname,3000);
}
 
function loadname() {
  if (donationnumber < donations.length) {
    $(".sectot").text("$" + donations[donationnumber][0]);
    $(".tot").css("color", "rgba(255,255,255,0)");
    $(".tot").css("width", ($(".sectot").width() + "px"));
    setTimeout(function(){$(".tot").text("$" + donations[donationnumber][0]);},500);
    setTimeout(function(){$(".tot").css("color", "rgba(255,255,255,1)");},500);/**/
    
    
    $(".secname").text(donations[donationnumber][1]);
    //alert($(".secname").width());
    $(".name").css("color", "rgba(0,0,0,0)");
    $(".name").css("width", ($(".secname").width() + "px"));
    setTimeout(function(){$(".name").text(donations[donationnumber][1]);},500);
    setTimeout(function(){$(".name").css("color", "rgba(0,0,0,1)");},500);
    
    setTimeout(function(){total += donations[donationnumber][0];},1000);
    if (donations[donationnumber][0] >= 1000) {
      setTimeout(init,8000);
    } else {
      setTimeout(init,4000);
    }
  }  
}
 
function setloading() {
  setInterval(loadname,4000);
}
 
function addCommas(n) {
  return (n + '').replace(/(\d)(?=(\d{3})+$)/g, '$1,');
}
 
   
</script>