ajax-progress.module.css

Same filename in this branch
  1. 11.x core/themes/olivero/css/components/ajax-progress.module.css
  2. 11.x core/themes/stable9/css/system/components/ajax-progress.module.css
  3. 11.x core/modules/system/css/components/ajax-progress.module.css
  4. 11.x core/misc/components/ajax-progress.module.css
  5. 11.x core/themes/stable9/css/core/components/ajax-progress.module.css
Same filename in other branches
  1. 9 core/themes/olivero/css/components/ajax-progress.module.css
  2. 9 core/themes/stable9/css/system/components/ajax-progress.module.css
  3. 9 core/themes/claro/css/components/ajax-progress.module.css
  4. 9 core/themes/stable/css/system/components/ajax-progress.module.css
  5. 9 core/modules/system/css/components/ajax-progress.module.css
  6. 8.9.x core/themes/claro/css/components/ajax-progress.module.css
  7. 8.9.x core/themes/stable/css/system/components/ajax-progress.module.css
  8. 8.9.x core/modules/system/css/components/ajax-progress.module.css
  9. 10 core/themes/olivero/css/components/ajax-progress.module.css
  10. 10 core/themes/stable9/css/system/components/ajax-progress.module.css
  11. 10 core/themes/claro/css/components/ajax-progress.module.css
  12. 10 core/modules/system/css/components/ajax-progress.module.css
  13. 10 core/misc/components/ajax-progress.module.css
  14. 10 core/themes/stable9/css/core/components/ajax-progress.module.css

Throbber.

File

core/themes/claro/css/components/ajax-progress.module.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Throbber.
  10. */
  11. .ajax-progress {
  12. display: inline-block;
  13. }
  14. /**
  15. * Progress bar.
  16. */
  17. .ajax-progress-bar {
  18. width: 13em;
  19. padding: 0 0.3125rem; /* 0 5px */
  20. }
  21. /**
  22. * Throbber.
  23. */
  24. .ajax-progress--throbber {
  25. position: relative;
  26. display: inline-flex;
  27. align-content: center;
  28. height: 1.125rem;
  29. margin: -0.1875rem var(--ajax-progress-margin-horizontal) 0;
  30. vertical-align: middle;
  31. white-space: nowrap;
  32. line-height: 1.125rem;
  33. }
  34. /**
  35. * Remove margin from ajax throbbers following buttons because buttons already
  36. * have a large margin set.
  37. */
  38. .js .action-link:not(.js-hide, .button--action) + .ajax-progress--throbber,
  39. .js .button:not(.js-hide, .button--action) + .ajax-progress--throbber {
  40. margin-inline-start: 0;
  41. }
  42. /**
  43. * Restore start margin for ajax throbbers inside a managed file widget.
  44. */
  45. .js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
  46. .js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
  47. margin-inline-start: var(--ajax-progress-margin-horizontal); /* LTR */
  48. }
  49. .ajax-progress__throbber {
  50. box-sizing: border-box;
  51. width: 1.125rem;
  52. height: 1.125rem;
  53. animation: claro-throbber 0.75s linear infinite;
  54. border: 2px solid var(--color-absolutezero);
  55. border-right: 2px dotted transparent;
  56. border-radius: 50%;
  57. }
  58. .ajax-progress__message {
  59. display: inline-block;
  60. padding-inline-start: var(--ajax-progress-margin-horizontal);
  61. font-size: var(--font-size-label);
  62. }
  63. /**
  64. * Full screen throbber.
  65. */
  66. .ajax-progress--fullscreen,
  67. .ui-dialog .ajax-progress--throbber {
  68. position: fixed;
  69. z-index: 1261;
  70. inset-block-start: 50%;
  71. inset-inline-start: 50%;
  72. box-sizing: border-box;
  73. width: 3.5rem; /* 56px */
  74. height: 3.5rem;
  75. margin: -1.75rem;
  76. border: var(--input-border-size) solid var(--jui-dropdown-border-color);
  77. border-radius: 3.5rem;
  78. background: var(--color-white);
  79. box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
  80. }
  81. .ajax-progress__throbber--fullscreen,
  82. .ui-dialog .ajax-progress__throbber {
  83. position: absolute;
  84. inset-block-start: 50%;
  85. inset-inline-start: 50%;
  86. width: 1.75rem; /* 28px */
  87. height: 1.75rem; /* 28px */
  88. margin: -0.875rem;
  89. content: "";
  90. border: 3px solid var(--color-absolutezero);
  91. border-right: 3px dotted transparent;
  92. }
  93. .ui-dialog .ajax-progress__message {
  94. display: none;
  95. }
  96. @keyframes claro-throbber {
  97. 0% {
  98. transform: rotateZ(0);
  99. }
  100. 100% {
  101. transform: rotateZ(360deg);
  102. }
  103. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.