spinner-configs-282fd50a.js 4.0 KB

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