spinners.mdx 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. ---
  2. title: Spinners
  3. summary: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
  4. bootstrapLink: components/spinners/
  5. description: Indicate loading state with spinners.
  6. ---
  7. ## Default markup
  8. Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
  9. ```html
  10. <div class="spinner-border"></div>
  11. ```
  12. Look at the example below to see how the spinner works:
  13. ```html example centered
  14. <div class="spinner-border"></div>
  15. ```
  16. ## Colors
  17. Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
  18. ```html example centered separated
  19. <div class="spinner-border text-blue" role="status"></div>
  20. <div class="spinner-border text-azure" role="status"></div>
  21. <div class="spinner-border text-indigo" role="status"></div>
  22. <div class="spinner-border text-purple" role="status"></div>
  23. <div class="spinner-border text-pink" role="status"></div>
  24. <div class="spinner-border text-red" role="status"></div>
  25. <div class="spinner-border text-orange" role="status"></div>
  26. <div class="spinner-border text-yellow" role="status"></div>
  27. <div class="spinner-border text-lime" role="status"></div>
  28. <div class="spinner-border text-green" role="status"></div>
  29. <div class="spinner-border text-teal" role="status"></div>
  30. <div class="spinner-border text-cyan" role="status"></div>
  31. ```
  32. ```html
  33. <div class="spinner-border text-blue" role="status"></div>
  34. <div class="spinner-border text-red" role="status"></div>
  35. ```
  36. ## Size
  37. Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.
  38. ```html example centered separated
  39. <div class="spinner-border" role="status"></div>
  40. <div class="spinner-border spinner-border-sm" role="status"></div>
  41. ```
  42. ## Growing spinner
  43. Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state.
  44. ```html example centered
  45. <div class="spinner-grow" role="status"></div>
  46. ```
  47. Growing spinners also come in a variety of colors to choose from.
  48. ```html example centered separated
  49. <div class="spinner-grow text-blue" role="status"></div>
  50. <div class="spinner-grow text-azure" role="status"></div>
  51. <div class="spinner-grow text-indigo" role="status"></div>
  52. <div class="spinner-grow text-purple" role="status"></div>
  53. <div class="spinner-grow text-pink" role="status"></div>
  54. <div class="spinner-grow text-red" role="status"></div>
  55. <div class="spinner-grow text-orange" role="status"></div>
  56. <div class="spinner-grow text-yellow" role="status"></div>
  57. <div class="spinner-grow text-lime" role="status"></div>
  58. <div class="spinner-grow text-green" role="status"></div>
  59. <div class="spinner-grow text-teal" role="status"></div>
  60. <div class="spinner-grow text-cyan" role="status"></div>
  61. ```
  62. ```html
  63. <div class="spinner-grow text-blue" role="status"></div>
  64. <div class="spinner-grow text-azure" role="status"></div>
  65. ```
  66. ## Button with spinner
  67. Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
  68. ```html
  69. <a href="#" class="btn btn-primary">
  70. <span class="spinner-border spinner-border-sm me-2" role="status"></span>
  71. Button
  72. </a>
  73. ```
  74. Look at the example below to see how the button with a spinner works:
  75. ```html example centered separated code
  76. <a href="#" class="btn btn-primary">
  77. <span class="spinner-border spinner-border-sm me-2" role="status"></span>
  78. Button
  79. </a>
  80. <a href="#" class="btn btn-danger">
  81. <span class="spinner-border spinner-border-sm me-2" role="status"></span>
  82. Button
  83. </a>
  84. <a href="#" class="btn btn-warning">
  85. <span class="spinner-border spinner-border-sm me-2" role="status"></span>
  86. Button
  87. </a>
  88. <a href="#" class="btn btn-success">
  89. <span class="spinner-border spinner-border-sm me-2" role="status"></span>
  90. Button
  91. </a>
  92. <a href="#" class="btn">
  93. <span class="spinner-border spinner-border-sm me-2" role="status"></span>
  94. Button
  95. </a>
  96. ```
  97. ## Animated dots
  98. Use animated dots to show the loading state of a component. They provide feedback for an action a user has taken, when it takes a bit longer to complete. To do it you need to use the `.animated-dots` class on `span` element.
  99. ```html example centered code
  100. <h1>Loading<span class="animated-dots"></span>
  101. </h1>
  102. ```
  103. Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
  104. ```html example centered separated
  105. <a href="#" class="btn btn-primary">
  106. Loading<span class="animated-dots"></span>
  107. </a>
  108. <a href="#" class="btn btn-primary disabled">
  109. Loading<span class="animated-dots"></span>
  110. </a>
  111. ```