Skip to content
maplibre-yaml

loadingStyles

const loadingStyles: “\n/* Loading Overlay */\n.mly-loading-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.85);\n z-index: 1000;\n backdrop-filter: blur(2px);\n}\n\n.mly-loading-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n}\n\n.mly-loading-text {\n font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n font-size: 14px;\n color: #374151;\n font-weight: 500;\n}\n\n/* Circle Spinner */\n.mly-spinner—circle {\n width: 40px;\n height: 40px;\n border: 3px solid #e5e7eb;\n border-top-color: #3b82f6;\n border-radius: 50%;\n animation: mly-spin 0.8s linear infinite;\n}\n\n@keyframes mly-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Dots Spinner */\n.mly-spinner—dots {\n display: flex;\n gap: 8px;\n}\n\n.mly-spinner—dots::before,\n.mly-spinner—dots::after {\n content: ”;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #3b82f6;\n animation: mly-dots 1.4s infinite ease-in-out both;\n}\n\n.mly-spinner—dots::before {\n animation-delay: -0.32s;\n}\n\n.mly-spinner—dots::after {\n animation-delay: -0.16s;\n}\n\n@keyframes mly-dots {\n 0%, 80%, 100% {\n opacity: 0.3;\n transform: scale(0.8);\n }\n 40% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* Error Overlay */\n.mly-loading-overlay—error {\n background: rgba(254, 242, 242, 0.95);\n}\n\n.mly-error-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n max-width: 300px;\n padding: 20px;\n text-align: center;\n}\n\n.mly-error-icon {\n font-size: 32px;\n line-height: 1;\n}\n\n.mly-error-text {\n font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n font-size: 14px;\n color: #991b1b;\n font-weight: 500;\n}\n\n.mly-retry-button {\n padding: 8px 16px;\n font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n font-size: 14px;\n font-weight: 500;\n color: white;\n background: #dc2626;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.mly-retry-button:hover {\n background: #b91c1c;\n}\n\n.mly-retry-button:active {\n background: #991b1b;\n}\n\n/* Dark Mode Support */\n@media (prefers-color-scheme: dark) {\n .mly-loading-overlay {\n background: rgba(17, 24, 39, 0.85);\n }\n\n .mly-loading-text {\n color: #e5e7eb;\n }\n\n .mly-spinner—circle {\n border-color: #374151;\n border-top-color: #60a5fa;\n }\n\n .mly-spinner—dots::before,\n .mly-spinner—dots::after {\n background: #60a5fa;\n }\n\n .mly-loading-overlay—error {\n background: rgba(127, 29, 29, 0.95);\n }\n\n .mly-error-text {\n color: #fecaca;\n }\n}\n\n/* Reduced Motion Support */\n@media (prefers-reduced-motion: reduce) {\n .mly-spinner—circle {\n animation: none;\n border-top-color: #3b82f6;\n opacity: 0.7;\n }\n\n .mly-spinner—dots::before,\n .mly-spinner—dots::after {\n animation: none;\n opacity: 0.7;\n }\n\n .mly-retry-button {\n transition: none;\n }\n}\n”

Defined in: packages/core/src/ui/styles.ts:18

CSS styles for loading overlays and spinners.

Remarks

Section titled “Remarks”

Includes:

  • Loading overlay with backdrop
  • Circle spinner animation
  • Dots spinner animation
  • Error overlay with icon and retry button
  • Dark mode support
  • Reduced motion support