/* * AjaxBusySpinner - a pure-CSS busy indicator driven by AjaxSlim's ajax-activity broker. * * ajaxslim.js sets data-ajaxslim-busy="true" on while any ajax request is in flight and removes * it when idle. The spinner is hidden by default and revealed only while that attribute is present, so * no per-spinner JavaScript is needed. Three pulsing dots, no images, no dependencies. */ .ajaxslim-busy-spinner { display: none; gap: 0.35em; align-items: center; } /* Reveal whenever the document is in the busy state. */ html[data-ajaxslim-busy] .ajaxslim-busy-spinner { display: inline-flex; } .ajaxslim-busy-spinner .ajaxslim-busy-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; opacity: 0.3; animation: ajaxslim-busy-pulse 1s infinite ease-in-out both; } .ajaxslim-busy-spinner .ajaxslim-busy-dot:nth-child(1) { animation-delay: -0.32s; } .ajaxslim-busy-spinner .ajaxslim-busy-dot:nth-child(2) { animation-delay: -0.16s; } @keyframes ajaxslim-busy-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }