Vielen Dank für die hilfreichen Antworten.
Leider besteht für uns nur die Möglichkeit es wie von css-umsetzung beschrieben umzusetzen.
Daher habe ich mich dran gemacht und versucht ein onclick overlay mit spinner einzubauen. Ich habe mich etwas umgesehen und folgenden Code gefunden. Allerdings habe ich leichte Probleme diesen einzubauen.
also beim button habe ich ein onclick="configAnim()"; eingefügt.
Dieses ruft folgenden Code ab:
<div id="animation_outer" class="evom_animation_hidden"><div id="animation_inner"><div id="evomanimation" style="transform: scale(0.5) rotate(180deg);"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div><div class="bar5"></div><div class="bar6"></div><div class="bar7"></div><div class="bar8"></div></div></div></div>
<div id="evomanimation" style="transform: scale(0.5) rotate(225deg);"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div><div class="bar5"></div><div class="bar6"></div><div class="bar7"></div><div class="bar8"></div></div>
und das Skript:
<script type="text/javascript">
function configAnim() {
$("#animation_outer").removeClass('evom_animation_hidden');
$("#animation_outer").addClass('evom_animation_activ');
}
$(document).ready(function(){
$("#animation_outer").addClass('evom_animation_hidden');
$("#animation_outer").removeClass('evom_animation_activ');
/*
$("button[name='inWarenkorb']").click(function(){
$("#animation_outer").removeClass('evom_animation_hidden');
$("#animation_outer").addClass('evom_animation_activ');
});
*/
var count = 0;
function rotate() {
var elem2 = document.getElementById('evomanimation');
elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
if (count==360) { count = 0 }
count+=45;
window.setTimeout(rotate, 100);
}
window.setTimeout(rotate, 100);
});
</script>
Wenn ich diesen Code nun integriert habe und auf den Button klicke, öffnet sich das Overlay nicht. Allerdings kann ich mit den Entwicklertools sehen, dass der Code arbeitet. Liegt es daran, dass das Overlay einfach nicht sichtbar ist ? Bei der Seite auf der ich das gefunden habe funktioniert das ohne Probleme, allerdings ist da das "<div Animation_outer …." und das "<script ..." grau.
Falls das insgesamt nicht klappen sollte, wie viel würde eine Entwicklung ca. kosten? (Startup mit begrenztem Budget)
