How can I get the page loading widget when using a dropdown navigation list?

How can I get the page loading widget when using a dropdown navigation list?

I have the following code for a dropdown navigation menu to choose which page to go to next.  This works great, but I don't get the page loading widgets with this method.  Can I tweak this code to get that effect?  Or is there a better way to do this?  I have been searching around for hours and can't seem to find a solution for what I am trying to do!

Thanks for any help or suggestions!

Here is my code:
  1. <html> 
  2. <head> 
  3. <title>Links</title> 
  4. <meta name="viewport" content="width=device-width, initial-scale=1"> 
  5. <link rel="stylesheet" href="js/jquery.mobile-1.2.0.min.css" />
  6. <script src="js/jquery.js"></script>
  7. <script src="js/jquery.mobile-1.2.0.min.js"></script>
  8. </head> 
  9. <body> 
  10. <form name="nav">
  11. <select name="surf" data-mini="true" onChange="location=document.nav.surf.options[document.nav.surf.selectedIndex].value;" value="GO">
  12. <option selected>Choose a Report</option>
  13. <option value="info2.php">Orders Created by Day</option>
  14. <option value="info.php">Shipments Completed by Day</option>
  15. <option value="info3.php">Picks Completed by Day</option>
  16. <option value="info4.php">Orders Created by Day by Client</option>
  17. <option value="info5.php">Shipments Completed by Day by Client</option>
  18. <option value="info6.php">Picks Completed by Day by Client</option>
  19. </select>
  20. </form>
  21. </body>
  22. </html>