_spinner.less 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. ._spinner-keyframes() {
  6. @-moz-keyframes @spinner-keyframe-name {
  7. 0% {
  8. background-color: @spinner-first-color;
  9. }
  10. 100% {
  11. background-color: @spinner-second-color;
  12. }
  13. }
  14. @-webkit-keyframes @spinner-keyframe-name {
  15. 0% {
  16. background-color: @spinner-first-color;
  17. }
  18. 100% {
  19. background-color: @spinner-second-color;
  20. }
  21. }
  22. @-ms-keyframes @spinner-keyframe-name {
  23. 0% {
  24. background-color: @spinner-first-color;
  25. }
  26. 100% {
  27. background-color: @spinner-second-color;
  28. }
  29. }
  30. @keyframes @spinner-keyframe-name {
  31. 0% {
  32. background-color: @spinner-first-color;
  33. }
  34. 100% {
  35. background-color: @spinner-second-color;
  36. }
  37. }
  38. }
  39. ._spinner-loop(
  40. @_spinner-spin-count: @spinner-spin-count,
  41. @_spinner-rotate: @spinner-rotate,
  42. @_spinner-delay: @spinner-delay
  43. ) when (@_spinner-spin-count > 0) {
  44. ._spinner-loop(
  45. (@_spinner-spin-count - 1),
  46. (@_spinner-rotate - @spinner-rotate-step),
  47. (@_spinner-delay - @spinner-animation-step)
  48. );
  49. > span {
  50. &:nth-child(@{_spinner-spin-count}) {
  51. -webkit-animation-delay: @_spinner-delay;
  52. -moz-animation-delay: @_spinner-delay;
  53. -ms-animation-delay: @_spinner-delay;
  54. animation-delay: @_spinner-delay;
  55. -webkit-transform: ~'rotate(@{_spinner-rotate}deg)';
  56. -moz-transform: ~'rotate(@{_spinner-rotate}deg)';
  57. -ms-transform: ~'rotate(@{_spinner-rotate}deg)';
  58. transform: ~'rotate(@{_spinner-rotate}deg)';
  59. }
  60. }
  61. }
  62. ._spinner_transform() {
  63. -webkit-transform: @spinner-animation-transform;
  64. -moz-transform: @spinner-animation-transform;
  65. -ms-transform: @spinner-animation-transform;
  66. transform: @spinner-animation-transform;
  67. -webkit-animation-name: @spinner-keyframe-name;
  68. -moz-animation-name: @spinner-keyframe-name;
  69. -ms-animation-name: @spinner-keyframe-name;
  70. animation-name: @spinner-keyframe-name;
  71. -webkit-animation-duration: @spinner-animation-duration;
  72. -moz-animation-duration: @spinner-animation-duration;
  73. -ms-animation-duration: @spinner-animation-duration;
  74. animation-duration: @spinner-animation-duration;
  75. -webkit-animation-iteration-count: @spinner-animation-iteration-count;
  76. -moz-animation-iteration-count: @spinner-animation-iteration-count;
  77. -ms-animation-iteration-count: @spinner-animation-iteration-count;
  78. animation-iteration-count: @spinner-animation-iteration-count;
  79. -webkit-animation-direction: @spinner-animation-direction;
  80. -moz-animation-direction: @spinner-animation-direction;
  81. -ms-animation-direction: @spinner-animation-direction;
  82. animation-direction: @spinner-animation-direction;
  83. }