| /* https://loading.io/css/ */ |
| .loadingRing { |
| display: inline-block; |
| position: relative; |
| width: 20px; |
| height: 20px; |
| opacity: var(--search-local-loading-icon-opacity, 0.5); |
| } |
| |
| .loadingRing div { |
| box-sizing: border-box; |
| display: block; |
| position: absolute; |
| width: 16px; |
| height: 16px; |
| margin: 2px; |
| border: 2px solid |
| var(--search-load-loading-icon-color, var(--ifm-navbar-search-input-color)); |
| border-radius: 50%; |
| animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; |
| border-color: var( |
| --search-load-loading-icon-color, |
| var(--ifm-navbar-search-input-color) |
| ) |
| transparent transparent transparent; |
| } |
| |
| .loadingRing div:nth-child(1) { |
| animation-delay: -0.45s; |
| } |
| |
| .loadingRing div:nth-child(2) { |
| animation-delay: -0.3s; |
| } |
| |
| .loadingRing div:nth-child(3) { |
| animation-delay: -0.15s; |
| } |
| |
| @keyframes loading-ring { |
| 0% { |
| transform: rotate(0deg); |
| } |
| 100% { |
| transform: rotate(360deg); |
| } |
| } |