ajax-progress.module.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /**
  2. * @file
  3. * Throbber.
  4. */
  5. .ajax-progress {
  6. display: inline-flex;
  7. align-items: center;
  8. padding: 0;
  9. height: 100%;
  10. margin: 0;
  11. }
  12. .ajax-progress-throbber .throbber {
  13. border-radius: 100%;
  14. width: 24px;
  15. height: 24px;
  16. border-top: 3px solid rgba(0,128,255, 0.3);
  17. border-right: 3px solid rgba(0,128,255, 0.3);
  18. border-bottom: 3px solid rgba(0,128,255, 0.3);
  19. border-left: 3px solid #0678be;
  20. -webkit-transform: translateZ(0);
  21. -ms-transform: translateZ(0);
  22. transform: translateZ(0);
  23. -webkit-animation: load 0.7s infinite linear;
  24. animation: load 0.7s infinite linear;
  25. padding: 0;
  26. margin-right: 6px;
  27. }
  28. .ajax-progress-throbber .message {
  29. display: none;
  30. }
  31. tr .ajax-progress-throbber .throbber {
  32. margin: 0 10px;
  33. }
  34. .ajax-progress-bar {
  35. width: 18px;
  36. }
  37. /* Full screen throbber */
  38. .ajax-progress-fullscreen {
  39. left: 0;
  40. position: fixed;
  41. top: 0;
  42. z-index: 1000;
  43. height: 100%;
  44. padding: 0;
  45. width: 100%;
  46. }
  47. .ajax-progress-fullscreen::after {
  48. content: '';
  49. position: absolute;
  50. top: 50%;
  51. left: 50%;
  52. margin-top: -15px;
  53. margin-left: -15px;
  54. width: 20px;
  55. height: 20px;
  56. border-radius: 100%;
  57. border-top: 5px solid rgba(0,128,255, 0.3);
  58. border-right: 5px solid rgba(0,128,255, 0.3);
  59. border-bottom: 5px solid rgba(0,128,255, 0.3);
  60. border-left: 5px solid #0678be;
  61. -webkit-transform: translateZ(0);
  62. -ms-transform: translateZ(0);
  63. transform: translateZ(0);
  64. -webkit-animation: load 0.7s infinite linear;
  65. animation: load 0.7s infinite linear;
  66. z-index: 9999;
  67. }
  68. [dir="rtl"] .ajax-progress-fullscreen {
  69. left: auto;
  70. right: 49%;
  71. }
  72. /* keyframes animation */
  73. @-webkit-keyframes load {
  74. 0% {
  75. -webkit-transform: rotate(0deg);
  76. transform: rotate(0deg);
  77. }
  78. 100% {
  79. -webkit-transform: rotate(360deg);
  80. transform: rotate(360deg);
  81. }
  82. }
  83. @keyframes load {
  84. 0% {
  85. -webkit-transform: rotate(0deg);
  86. transform: rotate(0deg);
  87. }
  88. 100% {
  89. -webkit-transform: rotate(360deg);
  90. transform: rotate(360deg);
  91. }
  92. }