Estoy tratando de replicar este ejemplo de codepen
https://codepen.io/jmalatia/pen/eYLzBg?editors=1111
Sin embargo, no funciona en mi Visual Studio Code como en el sitio. Incluí todos los archivos css y js especificados allí, pero no puedo ver nada más que el botón. No puedo mostrar la animación del cargador. ¿Me estoy perdiendo algo? Incluí estas fuentes como se indica en el ejemplo de codepen. No estoy seguro si me falta alguna biblioteca, tal vez.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script type="text/javascript" src="script.js"></script>Tal vez no estén en el orden correcto. Por favor, necesito ayuda para resolver esto.
Intente ejecutar este script al final de los enlaces Js.
<script> $('.btn').on('click', function() { var $this = $(this); $this.button('loading'); setTimeout(function() { $this.button('reset'); }, 8000); }); </script> $('.btn').on('click', function() { var $this = $(this); $this.button('loading'); setTimeout(function() { $this.button('reset'); }, 8000); }); <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div style="margin:3em;"> <button type="button" class="btn btn-primary btn-lg " id="load1" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button> <br> <br> <button type="button" class="btn btn-primary btn-lg" id="load2" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>¿Vinculaste todos los activos actualmente? Revisé el código, funcionó perfectamente de mi lado. ahora mismo no tengo tu código para comprobar dónde está el problema. asegúrese de que todos los archivos CSS estén vinculados en una etiqueta principal. y los archivos de script están antes de que termine la etapa del cuerpo. verifique la consola del navegador, si hay un error en la consola del navegador, comparta una captura de pantalla. gracias