Ladda: Spinner affiche pas
Je suis en utilisant Ladda à introduire des effets de charge sur mes boutons de formulaire. Voir la Ladda démo
L'effet que j'utilise est zoom-out
. Cela fonctionne, mais le compteur n'affiche pas. Est-il quelque chose que je suis absent?
Mon bouton:
<button type="submit" class="ladda-button" data-style="zoom-out" name="submit">
<span class="ladda-label">Submit</span>
<span class="ladda-spinner"></span>
</button>
Mon script JS (prises de ici):
var buttons = document.querySelectorAll( '.ladda-button' );
Array.prototype.slice.call( buttons ).forEach( function( button ) {
var resetTimeout;
button.addEventListener( 'click', function() {
if( typeof button.getAttribute( 'data-loading' ) === 'string' ) {
button.removeAttribute( 'data-loading' );
}
else {
button.setAttribute( 'data-loading', '' );
}
clearTimeout( resetTimeout );
resetTimeout = setTimeout( function() {
button.removeAttribute( 'data-loading' );
}, 3000 );
}, false );
} );
Les ressources dont je suis le chargement sont:
- ladda-themeless.min.css
- ladda.min.js
- spin.min.js
Je n'avais jamais entendu parler de Ladda j'ai donc téléchargé la démo et modifié le css pour themeless.min.css. Les boutons sont maintenant le navigateur par défaut des boutons et la roulette est presque invisible (parce que c'est blanc). Est le spinner vraiment manquant ou tout simplement pas visible comme dans mon cas?
Le compteur n'affiche pas. Je ne peux pas le voir de la toupie, même si j'utilise ladda.min.css qui ajoute un fond noir pour le bouton
lorsque j'affiche le code source de la page et cliquez sur le bouton, pas de
Il ressemble à votre code s'appuie uniquement sur le css de Ladda puisqu'il n'est pas
toute chance vous pourriez vous poster un exemple de travail? lorsque j'utilise
Le compteur n'affiche pas. Je ne peux pas le voir de la toupie, même si j'utilise ladda.min.css qui ajoute un fond noir pour le bouton
lorsque j'affiche le code source de la page et cliquez sur le bouton, pas de
ladda-progress
div est ajouté au DOM.Il ressemble à votre code s'appuie uniquement sur le css de Ladda puisqu'il n'est pas
Ladda.bind('.ladda-button')
. Le spinner est inséré avec le javascript. Qu'est-ce exactement que vous essayez de faire? Avez-vous eu un coup d'oeil à Ladda fonctions comme stop();
?toute chance vous pourriez vous poster un exemple de travail? lorsque j'utilise
Ladda.bind('.ladda-button');
à la place de mon script, tout stopd de travailOriginalL'auteur henrywright | 2014-03-18
Vous devez vous connecter pour publier un commentaire.
J'ai et ça marche:
Si vous voulez arrêter le bouton manuellement, utilisez l'une des fonctions décrites dans le la documentation
Être conscient, spinner animation ne fonctionne pas avec
input
éléments, seulement avecbuttons
.OriginalL'auteur jazZRo
assurez-vous d'inclure
spin.min.js
d'abord et ensuiteladda.min.js
OriginalL'auteur Kahbazi
Je voulais ajouter cette autre cause possible de cette, dont je n'ai juste travaillé après environ une heure de jeu environ. Remarque ce n'est pas spécialement le cas des OP cas, mais il est une cause de la spinner affiche pas.
De la toupie sera invisible si c'est de la même couleur que le bouton! Donc, si vous utilisez
themeless.css
et votre bouton est une normebtn-default
vous ne verrez pas le spinner!La modification de la
data-spinner-color
ou de la couleur de votre bouton est une solution dans ce cas.OriginalL'auteur Dan Gravell
De ne pas définir d'attribut de texte sur le bouton, il va remplacer le spinner
supprimer
button.setAttribute( 'data-loading', '' );
OriginalL'auteur sri