In this article we are going to show different spinners available in Ionic. In our last article we learned to make a small application with Ionic and there we also learned to code and debug in Visual Studio Code. Here are the last two articles,

Nowadays, we have a lot of frameworks which provide a lot of predefined tools and libraries to make our application more attractive and fast. Here in ionic we have lots of predefined icons in the form of spinners. In this article we are going to make a web page on which we will use those different predefined icon spinners.

Let’s start to work for them.

Step 1. Open Visual Studio Code and create directory & files,
Directory – IONIC_Spinners

File – index.html

Directory - Style
  • File- Spinner_Style.css
  • File- spinner_Ionic.min.css
    •
Directory -JS
  • File- Spinner_JS.bundle.js
  • File- Spinner_Ionic.bundle.min.js
index.html

Step 2. Start code to the application

index.html

In this page we used ion-spinnerdirective that provides a variety of animated spinners. Spinners enable us to give feedback to our users that the app is processing/thinking/waiting, or whatever we’d like it to indicate.
  1. <html ng-app="ionicApp">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  7. <title>Ionic Spinners</title>
  8. <link href="Style\spinner_Ionic.min.css" rel="stylesheet">
  9. <link href="Style\Spinner_Style.css" rel="stylesheet">
  10. <scriptsrc="JS\Spinner_Ionic.bundle.min.js">
  11. </script>
  12. <scriptsrc="JS\Spinner_JS.bundle.js">
  13. </script>
  14. </head>
  16. <body ng-controller="MyCtrl">
  17. <ion-content scroll="false" class="has-header">
  19. <table>
  20. <th>
  21. <caption>Spinner in Ionic</caption>
  22. </th>
  23. <tr>
  24. <td>
  25. <ion-spinner icon="android"></ion-spinner>
  26. </td>
  27. <td>
  28. <ion-spinner icon="ios"></ion-spinner>
  29. </td>
  30. <td>
  31. <ion-spinner icon="ios-small"></ion-spinner>
  32. </td>
  33. <td>
  34. <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
  35. </td>
  36. <td>
  37. <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
  38. </td>
  39. </tr>
  40. <tr>
  41. <td>Spinner for Android</td>
  42. <td>Spinner forIOS</td>
  43. <td>Small Spinner for IOS </td>
  44. <td>Spinner in Bubbles</td>
  45. <td>Spinner With Circles</td>
  46. </tr>
  47. <tr>
  48. <td>
  49. <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>
  50. </td>
  51. <td>
  52. <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
  53. </td>
  54. <td>
  55. <ion-spinner icon="lines" class="spinner-calm"></ion-spinner>
  56. </td>
  57. <td>
  58. <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>
  59. </td>
  60. <td>
  61. <ion-spinner icon="spiral"></ion-spinner>
  62. </td>
  63. </tr>
  64. <tr>
  65. <td>Royal Spinner</td>
  66. <td>Dark Spinner</td>
  67. <td>Spinner With Lines</td>
  68. <td>Ripple</td>
  69. <td>Spiral</td>
  70. </tr>
  71. </table>
  72. </ion-content>
  74. </body>
  76. </html>
Spinner_Style.css
  1. body
  2. {
  3. cursor: url('http://ionicframework.com/img/finger.png'),
  4. auto;
  5. position: relative;
  6. }
  7. table
  8. {
  9. position: absolute;
  10. top: 0;
  11. bottom: 0;
  12. left: 0;
  13. right: 0;
  14. margin: auto;
  15. width: 100 % ;
  16. height: 100 % ;
  17. }
  18. th
  19. {
  20. text - align: centre;
  22. }
  23. caption
  24. {
  25. font - size: xx - large;
  26. font - weight: bolder;
  27. color: blue;
  28. }
  30. td
  31. {
  32. text - align: center;
  33. margin - bottom: 40 px!important;
  34. }
  35. .spinner svg
  36. {
  37. width: 19 % !important;
  38. height: 85 px!important;
  39. }
spinner_Ionic.min.css

File from the url.
  1. Spinner_JS.bundle.js
  2. angular.module('ionicApp', ['ionic'])
  4. .controller('MyCtrl', function($scope) {
  6. });
  7. Spinner_Ionic.bundle.min.js
File from the url.

Step 3: Run the application,

run
run
run