spinner-configs-964f7cf3.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. const spinners = {
  5. bubbles: {
  6. dur: 1000,
  7. circles: 9,
  8. fn: (dur, index, total) => {
  9. const animationDelay = `${(dur * index) / total - dur}ms`;
  10. const angle = (2 * Math.PI * index) / total;
  11. return {
  12. r: 5,
  13. style: {
  14. top: `${32 * Math.sin(angle)}%`,
  15. left: `${32 * Math.cos(angle)}%`,
  16. 'animation-delay': animationDelay,
  17. },
  18. };
  19. },
  20. },
  21. circles: {
  22. dur: 1000,
  23. circles: 8,
  24. fn: (dur, index, total) => {
  25. const step = index / total;
  26. const animationDelay = `${dur * step - dur}ms`;
  27. const angle = 2 * Math.PI * step;
  28. return {
  29. r: 5,
  30. style: {
  31. top: `${32 * Math.sin(angle)}%`,
  32. left: `${32 * Math.cos(angle)}%`,
  33. 'animation-delay': animationDelay,
  34. },
  35. };
  36. },
  37. },
  38. circular: {
  39. dur: 1400,
  40. elmDuration: true,
  41. circles: 1,
  42. fn: () => {
  43. return {
  44. r: 20,
  45. cx: 48,
  46. cy: 48,
  47. fill: 'none',
  48. viewBox: '24 24 48 48',
  49. transform: 'translate(0,0)',
  50. style: {},
  51. };
  52. },
  53. },
  54. crescent: {
  55. dur: 750,
  56. circles: 1,
  57. fn: () => {
  58. return {
  59. r: 26,
  60. style: {},
  61. };
  62. },
  63. },
  64. dots: {
  65. dur: 750,
  66. circles: 3,
  67. fn: (_, index) => {
  68. const animationDelay = -(110 * index) + 'ms';
  69. return {
  70. r: 6,
  71. style: {
  72. left: `${32 - 32 * index}%`,
  73. 'animation-delay': animationDelay,
  74. },
  75. };
  76. },
  77. },
  78. lines: {
  79. dur: 1000,
  80. lines: 8,
  81. fn: (dur, index, total) => {
  82. const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;
  83. const animationDelay = `${(dur * index) / total - dur}ms`;
  84. return {
  85. y1: 14,
  86. y2: 26,
  87. style: {
  88. transform: transform,
  89. 'animation-delay': animationDelay,
  90. },
  91. };
  92. },
  93. },
  94. 'lines-small': {
  95. dur: 1000,
  96. lines: 8,
  97. fn: (dur, index, total) => {
  98. const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;
  99. const animationDelay = `${(dur * index) / total - dur}ms`;
  100. return {
  101. y1: 12,
  102. y2: 20,
  103. style: {
  104. transform: transform,
  105. 'animation-delay': animationDelay,
  106. },
  107. };
  108. },
  109. },
  110. 'lines-sharp': {
  111. dur: 1000,
  112. lines: 12,
  113. fn: (dur, index, total) => {
  114. const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
  115. const animationDelay = `${(dur * index) / total - dur}ms`;
  116. return {
  117. y1: 17,
  118. y2: 29,
  119. style: {
  120. transform: transform,
  121. 'animation-delay': animationDelay,
  122. },
  123. };
  124. },
  125. },
  126. 'lines-sharp-small': {
  127. dur: 1000,
  128. lines: 12,
  129. fn: (dur, index, total) => {
  130. const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
  131. const animationDelay = `${(dur * index) / total - dur}ms`;
  132. return {
  133. y1: 12,
  134. y2: 20,
  135. style: {
  136. transform: transform,
  137. 'animation-delay': animationDelay,
  138. },
  139. };
  140. },
  141. },
  142. };
  143. const SPINNERS = spinners;
  144. export { SPINNERS as S };