Est-ce une bonne idée d'afficher l'indicateur de progression à l'intérieur d'un bouton?
Exemples typiques: http://msurguy.github.io/ladda-bootstrap
Exemples plus fous: http://tympanus.net/Development/ProgressButtonStyles
C'est pour une application de bureau si cela est important. Considérez que la vue cible a environ trois boutons différents. L'avantage est que l'utilisateur sait toujours quelle commande de quelques-uns exécute.
Un autre point est qu'un bouton peut ensuite passer à un état différent: Inactive (press to execute) -> In Progress (execution progress spinner) -> Finish (happy icon - click to close)
Votre bouton devrait avoir 3 phases si vous prévoyez d'utiliser l'indicateur de progression à l'intérieur.
- Statique
- Progression
- Succès ou échec
Les boutons d'action flottants dans Material Design utilisent un concept similaire. Vous pourrez peut-être vous rapporter à cet exemple sur Material Up.
La phase statique indique l'action à effectuer. La phase de progression a une barre de progression déterminée ou indéterminée, selon les données qui vous sont retournées. La phase de réussite ou d'échec spécifie le résultat de l'action. En cas de succès, faites quelque chose.
En cas d'échec, affichez un message disant [Remplacez par votre action] Échec et laissez cliquer sur le bouton pour effectuer à nouveau l'action.
Fonce. L'un des avantages supplémentaires de l'affichage d'une rétroaction immédiate dans le bouton avec lequel vous interagissez est une réduction du nombre de soumissions de formulaires en double. Cela peut être très utile dans les instances de commerce électronique où une double soumission peut entraîner une double charge.
La meilleure pratique serait de limiter le comportement aux ajouts/soumissions "positifs", plutôt qu'aux actions négatives/destructives telles que "supprimer". Si l'action principale est nécessairement de nature destructrice - assurez-vous d'inclure une "annulation" ou une autre action de renflouement pour annuler la progression après le début.
C'est bien d'avoir un indicateur de rotation/progression dans un bouton, mais essayez de le rendre assez grand et de placer l'indicateur dans le coin, afin que les utilisateurs ne se sentent pas distraits par l'indicateur de rotation. Un bon exemple de Facebook page de connexion à l'application iOS: 
Je ne vois aucun problème à utiliser une telle solution, mais gardez à l'esprit que:
Une fois soumis, le bouton utilisera uniquement la barre de progression (de gauche à droite). Une fois la soumission terminée, le texte "Soumettre" ne sera plus disponible, utilisez plutôt cette coche indiquant que la soumission a été effectuée.
Et, bien sûr, utilisez de bonnes couleurs de contraste et n'oubliez pas de changer l'étiquette aria en "Soumettre", "envoyer" et "Soumis".