Preloader 
Author: A. HuserGuten Tag
Hat man auf einer Website sehr viele Inhalte (z. B. Bilder oder Videos), so kann dies die Ladezeit stark erhöhen. Damit der Besucher keine halbfertige Seite präsentiert bekommt, kann man ein animiertes Lade-Icon – einen sogenannten Preloader – vorschalten.
Es wäre sehr gut, wenn Sie ein Tool (Object) machen würden, dass man dies auf der Website einbauen könnte!
Nochmals zum Preloader - leider habe ich von den Entwicklern leider (noch?) KEINE Antwort erhalten. Da ich kein Profi-Programmierer bin wäre es toll wenn ich eine Antwort auf Deutsch erhalten würde.
Meine www: www.huser-gaertnerei.ch
@ user René W. : Danke für Deinen Tipp, aber ich kann damit leider nichts anfangen, weil ich nicht Deine Kentnisse habe. Vielleicht meldest Du Dich per PN?
Freundliche Grüsse
Armin Huser
Warum schreibst Du nicht Deinen alten Post https://helpcenter.websitex5.com/en/post/220386 weiter? So meldet sich Incomedia auch nicht schneller. Und die Frage an René kannst Du auch da loswerden.
Privatnachrichten sind, so viel ich weiss, hier nicht möglich.
Es ist ganz simpel.
Du erstellst auf 3, Sitemap, eine neue Seite.
Markierst die neue Seite
Du gehst auf 4. Erstellen der Seiten.
Dort fügst Du 6 Zeilen ein und nur 1 Spalte.
In die oberste Zeile kommt das Icon rein </> (HTML Code).
Doppelklich darauf, dann erscheint: HTML-Code.
Dort kopierst Du diesen Code rein:
<!-- Start of 1 progress Bar -->
<div class="progressbar clearfix " data-percent="100%">
<div class="progressbar-title"><span>Loading ...... Please Wait</span></div>
<div class="progressbar-bar" style="background: #4288d0;"></div>
<div class="progress-bar-percent">100%</div>
</div>
<!-- End of 1 progress Bar -->
In die unteren *5 Felder kommt zum Beispiel der Mansory rein.
Dort wird die Liste der Bilder mit den Fotos gefüllt.
* heisst die Gallerie wird auf die 5 Zeilen eingefügt.
Fertig.
Aber wie bereits geschrieben, es ist eine reine Animation und kei Preloader.
Wichtiger Nachtrag, leider hatte ich noch Einiges weggelassen:
Bei Erstellen der Sitemap den erstellten Seitentittel markieren.
Dann ganz oben auf Eigenschaften, doppelcklick.
Dann erscheint Eigenschaften der Seite. SEO Grafik Erweitert.
Dort anwählen: Nach dem <BODY>-Tag.
Dort einfügen:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.progressbar').each(function(){
jQuery(this).find('.progressbar-bar').animate({
width:jQuery(this).attr('data-percent')
},7000);
});
});
</script>
---------------------------------------------------------------------------------------------------------
In die oberste Zeile kommt das Icon rein </> (HTML Code).
Hier hatte folgendes noch gefehlt:
Anwählen Erweitert
Hier dann folgendes einfügen:
<style>
.progressbar {
position:relative;
display:block;
margin-bottom:15px;
width:100%;
background:#eee;
height:35px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
}
.progressbar-title {
position:absolute;
top:0;
left:0;
width:250px;
font-weight:600;
font-size:18px;
color:#ffffff;
background:#0000ff / #00f;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.progressbar-title span {
display:block;
background:rgba(0, 0, 0, 0.1);
padding:0 20px;
height:35px;
line-height:35px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.progressbar-bar {
height:35px;
width:0px;
background:#6adcfa;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.progress-bar-percent {
position:absolute;
right:10px;
top:0;
font-size:15px;
height:35px;
line-height:35px;
color:#ffffff;
'color:rgba(0, 0, 0, 0.4);
}
</style>
---------------------------------------------------------------------------------------------------------
Bei Erstellen der Seiten:
Ränder
Aussenrand 4 x 0 Innenabstand 4 x 0
Ich möchte mein Versehen entschuldigen.
Guten Tag Armin!
Ich habe Ihnen hier geantwortet: https://helpcenter.websitex5.com/en/post/220687
Bitte öffnen Sie nur einen Post per Frage: Es ist besser für Sie, den so müssen Sie weniger Posts folgen, und auch für die helpcenter.websitex5.com Community da diese die interne Suchmaschine bessere benutzen kann.
Danke! Mit freundlichen Grüßen.