script Loading Spinners installation

[aminetigh]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://www.sba-medecine.com/

Description du problème

salut
je veux installer ce Loading Spinners sur mon forum
voici le code mais ça marche pas sur le forum

Code:

<div id='loader'>
<div class="wrap">
<div class="bg">
<div class="loading">
<span class="title">loading...</span>
<span class="text"><data:blog.title/></span>
</div> </div></div></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.wrap&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style>

merci d'avance

[Bryx]

Bonjour,

Il faut savoir que tu utilises un code HTML format Blogger de Google.
Le code suivant fonctionne sur mon forum Forumactif quelle que soit la version.

Code:

<div id="loader">
    <div class="wrap">
        <div class="bg">
            <div class="loading">
                <span class="title">Chargement en cours...</span>
                <span class="text">Nom du forum</span>
            </div>
        </div>
    </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        setTimeout(function () {
            $(".wrap").fadeOut("slow");
            setTimeout(function () {
                $("#loader").fadeOut("slow")
            }, 1000)
        }, 1000)
    });
</script>

<style>
#loader{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:black;
    color:#eaf7ff;
    z-index:1000;
    font-family:sans-serif,arial
}
@-webkit-keyframes title{
    0%{
        opacity:0;
        right:130px
    }
    48%{
        opacity:0;
        right:130px
    }
    52%{
        opacity:1;
        right:30px
    }
    70%{
        opacity:1;
        right:30px
    }
    100%{
        opacity:0;
        right:30px
    }
}
@-moz-keyframes title{
    0%{
        opacity:0;
        right:130px
    }
    48%{
        opacity:0;
        right:130px
    }
    52%{
        opacity:1;
        right:30px
    }
    70%{
        opacity:1;
        right:30px
    }
    100%{
        opacity:0;
        right:30px
    }
}
@-webkit-keyframes fade{
    0%{
        opacity:1
    }
    100%{
        opacity:0
    }
}
@-moz-keyframes fade{
    0%{
        opacity:1
    }
    100%{
        opacity:0
    }
}
@-webkit-keyframes bg{
    0%{
        background-color:#306f99
    }
    50%{
        background-color:#19470f
    }
    90%{
        background-color:#734a10
    }
}
@-moz-keyframes bg{
    0%{
        background-color:#306f99
    }
    50%{
        background-color:#19470f
    }
    90%{
        background-color:#734a10
    }
}
@-webkit-keyframes blink{
    0%{
        opacity:0
    }
    5%{
        opacity:1
    }
    10%{
        opacity:0
    }
    15%{
        opacity:1
    }
    20%{
        opacity:0
    }
    25%{
        opacity:1
    }
    30%{
        opacity:0
    }
    35%{
        opacity:1
    }
    40%{
        opacity:0;
        right:-21px
    }
    45%{
        opacity:1;
        right:80px
    }
    50%{
        opacity:0;
        right:-21px
    }
    51%{
        right:-21px
    }
    55%{
        opacity:1
    }
    60%{
        opacity:0
    }
    65%{
        opacity:1
    }
    70%{
        opacity:0
    }
    75%{
        opacity:1
    }
    80%{
        opacity:0
    }
    85%{
        opacity:1
    }
    90%{
        opacity:0;
        right:-21px
    }
    95%{
        opacity:1;
        right:80px
    }
    96%{
        right:-21px
    }
    100%{
        opacity:0;
        right:-21px
    }
}
@-moz-keyframes blink{
    0%{
        opacity:0
    }
    5%{
        opacity:1
    }
    10%{
        opacity:0
    }
    15%{
        opacity:1
    }
    20%{
        opacity:0
    }
    25%{
        opacity:1
    }
    30%{
        opacity:0
    }
    35%{
        opacity:1
    }
    40%{
        opacity:0;
        right:-21px
    }
    45%{
        opacity:1;
        right:80px
    }
    50%{
        opacity:0;
        right:-21px
    }
    51%{
        right:-21px
    }
    55%{
        opacity:1
    }
    60%{
        opacity:0
    }
    65%{
        opacity:1
    }
    70%{
        opacity:0
    }
    75%{
        opacity:1
    }
    80%{
        opacity:0
    }
    85%{
        opacity:1
    }
    90%{
        opacity:0;
        right:-21px
    }
    95%{
        opacity:1;
        right:80px
    }
    96%{
        right:-21px
    }
    100%{
        opacity:0;
        right:-21px
    }
}
.wrap{
    font-size:18px;
    font-weight:700;
    left:25%;
    letter-spacing:5px;
    margin-left:-80px;
    margin-top:-40px;
    position:absolute;
    top:50%;
    width:68%
}
.bg{
    padding:30px 30px 30px 0;
    background:#306f99;
    -moz-animation:bg 1.5s linear infinite;
    -webkit-animation:bg 1.5s linear infinite;
    animation:bg 1.5s linear infinite;
    -moz-box-shadow:inset 0 0 45px 30px black;
    -webkit-box-shadow:inset 0 0 45px 30px black;
    box-shadow:inset 0 0 45px 30px black
}
.loading{
    position:relative;
    text-align:right;
    text-shadow:0 0 6px#bce4ff;
    height:20px;
    width:150px;
    margin:0 auto
}
.loading span{
    display:block;
    text-transform:uppercase;
    position:absolute;
    right:30px;
    height:20px;
    width:400px;
    line-height:20px
}
.loading span:after{
    content:"";
    display:block;
    position:absolute;
    top:-2px;
    right:-21px;
    height:20px;
    width:16px;
    background:#eaf7ff;
    -moz-box-shadow:0 0 15px#bce4ff;
    -webkit-box-shadow:0 0 15px#bce4ff;
    box-shadow:0 0 15px#bce4ff;
    -moz-animation:blink 3.4s infinite;
    -webkit-animation:blink 3.4s infinite;
    animation:blink 3.4s infinite
}
.loading span.title{
    -moz-animation:title 3.4s linear infinite;
    -webkit-animation:title 3.4s linear infinite;
    animation:title 3.4s linear infinite
}
.loading span.text{
    -moz-animation:title 3.4s linear 1.7s infinite;
    -webkit-animation:title 3.4s linear 1.7s infinite;
    animation:title 3.4s linear 1.7s infinite;
    opacity:0
}
</style>

L'accès au compte fondateur est obligatoire pour la modification du template.

Le code doit être mis dans :
Panneau d'administration Affichage Templates Général overall_header

Coller le code après la balise HTML :

Code:

<body>

N'hésitez pas en cas de souci avec l'installation.

Cordialement,
Bryx

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.