spinners.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. /* --- Basics --- */
  2. .loading {
  3. display: inline-block;
  4. overflow: hidden;
  5. height: 1.3em;
  6. margin-top: -0.3em;
  7. line-height: 1.5em;
  8. vertical-align: text-bottom;
  9. }
  10. .loading::after {
  11. display: inline-table;
  12. white-space: pre;
  13. text-align: left;
  14. }
  15. /* --- Types --- */
  16. /* default loading is ellip */
  17. .loading::after {
  18. content: "\A.\A..\A...";
  19. animation: spin4 2s steps(4) infinite;
  20. }
  21. .loading.line::after {
  22. content: "/\A–\A\\\A|";
  23. text-align: center;
  24. animation: spin4 1s steps(4) infinite;
  25. }
  26. .loading.line2::after {
  27. content: "╲\A│\A╱\A─";
  28. text-align: center;
  29. animation: spin4 1s steps(4) infinite;
  30. }
  31. .loading.plus::after {
  32. content: "┽\A╀\A┾\A╁";
  33. animation: spin4 1s steps(4) infinite;
  34. }
  35. .loading.dots::after {
  36. content: "⠋\A⠙\A⠹\A⠸\A⠼\A⠴\A⠦\A⠧\A⠇\A⠏";
  37. animation: spin10 1s steps(10) infinite;
  38. }
  39. .loading.dots2::after {
  40. content: "⠋\A⠙\A⠚\A⠞\A⠖\A⠦\A⠴\A⠲\A⠳";
  41. animation: spin9 1s steps(9) infinite;
  42. }
  43. .loading.dots3::after {
  44. content: "⋮\A⋰\A⋯\A⋱";
  45. text-align: center;
  46. animation: spin4 1s steps(4) infinite;
  47. }
  48. .loading.lifting::after {
  49. content: "꜈꜍\A꜉꜎\A꜊꜏\A꜋꜐\A꜌꜑";
  50. animation: spin5 .5s steps(5) infinite alternate;
  51. }
  52. .loading.hamburger::after {
  53. content: "☱\A☲\A☴";
  54. animation: spin3 .3s steps(3) infinite alternate;
  55. }
  56. .loading.bar::after {
  57. content: "▏\A▎\A▍\A▌\A▋\A▊\A▉";
  58. animation: spin7 1s steps(7) infinite alternate;
  59. }
  60. .loading.bar2::after {
  61. content: "▁\A▂\A▃\A▄\A▅\A▆\A▇\A█";
  62. animation: spin8 2s steps(8) infinite alternate;
  63. }
  64. .loading.circle::after {
  65. content: "◴\A◷\A◶\A◵";
  66. animation: spin4 1s steps(4) infinite;
  67. }
  68. .loading.open-circle::after {
  69. content: "◜\A◠\A◝\A◞\A◡\A◟";
  70. animation: spin6 .6s steps(6) infinite;
  71. }
  72. .loading.arrow::after {
  73. content: "←\A↖\A↑\A↗\A→\A↘\A↓\A↙";
  74. animation: spin8 1s steps(8) infinite;
  75. }
  76. .loading.triangle::after {
  77. content: "◢\A◣\A◤\A◥";
  78. animation: spin4 1s steps(4) infinite;
  79. }
  80. .loading.triangles::after {
  81. content: "▹▹▹▹▹\A ▸▹▹▹▹\A ▹▸▹▹▹\A ▹▹▸▹▹\A ▹▹▹▸▹\A ▹▹▹▹▸";
  82. animation: spin6 1s steps(6) infinite;
  83. }
  84. .loading.beam::after {
  85. content: "\A= \A == \A === \A ====\A ===\A ==\A =\A";
  86. animation: spin9 1.2s steps(9) infinite;
  87. font-family: monospace;
  88. }
  89. .loading.bullet::after {
  90. content: " ● \A ● \A ● \A ● \A ●\A ● \A ● \A ● \A ● \A ● ";
  91. animation: spin10 1s steps(10) infinite;
  92. }
  93. .loading.bullseye::after {
  94. content: "◎◎◎\A◉◎◎\A◎◉◎\A◎◎◉";
  95. animation: spin4 1s steps(4) infinite;
  96. }
  97. .loading.rhomb::after {
  98. content: "◇◇◇\A◈◇◇\A◇◈◇\A◇◇◈";
  99. animation: spin4 1s steps(4) infinite;
  100. }
  101. .loading.fish::after {
  102. content: ">))'>\A  >))'>\A   >))'>\A    >))'>\A     >))'>\A     <'((<\A    <'((<\A   <'((<\A  <'((<\A <'((<\A";
  103. animation: spin10 5s steps(10) infinite;
  104. }
  105. .loading.toggle::after {
  106. content: "⊶\A⊷";
  107. animation: spin2 1s steps(2) infinite;
  108. }
  109. .loading.countdown::after {
  110. content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
  111. animation: spin10 10s steps(10) reverse;
  112. }
  113. .loading.time::after {
  114. content: "🕐\A🕑\A🕒\A🕓\A🕔\A🕕\A🕖\A🕗\A🕘\A🕙\A🕚\A🕛";
  115. animation: spin12 3s steps(12) infinite;
  116. width: 1.3em;
  117. }
  118. .loading.hearts::after {
  119. content: "💛\A💙\A💜\A💚";
  120. animation: spin4 2s steps(4) infinite;
  121. width: 1.3em;
  122. }
  123. .loading.earth::after {
  124. content: "🌍\A🌎\A🌏";
  125. animation: spin3 1s steps(3) infinite;
  126. width: 1.3em;
  127. }
  128. .loading.moon::after {
  129. content: "🌑\A🌒\A🌓\A🌔\A🌕\A🌖\A🌗\A🌘";
  130. animation: spin8 2s steps(8) infinite;
  131. width: 1.3em;
  132. }
  133. .loading.monkey::after {
  134. content: "🙈\A🙉\A🙊";
  135. animation: spin3 1.5s steps(3) infinite;
  136. width: 1.3em;
  137. }
  138. .loading.runner::after {
  139. content: "🚶\A🏃";
  140. animation: spin2 1s steps(2) infinite;
  141. width: 1.3em;
  142. }
  143. .loading.box-bounce::after {
  144. content:"▖\A▘\A▝\A▗";
  145. animation: spin4 1s steps(4) infinite;
  146. }
  147. .loading.star::after {
  148. content:"✶\A✸\A✹\A✺\A✹\A✷";
  149. animation: spin6 1s steps(6) infinite;
  150. }
  151. .loading.words::after {
  152. content: "Loading\A Still loading\A Mostly done\A A bit more \A Almost done\A Ready-ish";
  153. animation: spin6 12s steps(6) infinite;
  154. }
  155. /* --- Animations --- */
  156. @keyframes spin1 { to { transform: translateY( -1.5em); } }
  157. @keyframes spin2 { to { transform: translateY( -3.0em); } }
  158. @keyframes spin3 { to { transform: translateY( -4.5em); } }
  159. @keyframes spin4 { to { transform: translateY( -6.0em); } }
  160. @keyframes spin5 { to { transform: translateY( -7.5em); } }
  161. @keyframes spin6 { to { transform: translateY( -9.0em); } }
  162. @keyframes spin7 { to { transform: translateY(-10.5em); } }
  163. @keyframes spin8 { to { transform: translateY(-12.0em); } }
  164. @keyframes spin9 { to { transform: translateY(-13.5em); } }
  165. @keyframes spin10 { to { transform: translateY(-15.0em); } }
  166. @keyframes spin11 { to { transform: translateY(-16.5em); } }
  167. @keyframes spin12 { to { transform: translateY(-18.0em); } }