Description
AeroSpin CSS Loading Spinners adds a smooth, professional loading overlay to your WordPress site whenever visitors navigate between pages or submit forms. Choose from 100 unique spinner styles, customize the visual behavior, control overlay timing, exclude specific links or paths, and preview changes from a clean settings panel.
AeroSpin CSS Loading Spinners is designed for site owners, freelancers, agencies, and developers who want a lightweight loading experience without adding heavy libraries or external frontend dependencies. Built by WPClearPath.com, AeroSpin CSS Loading Spinners focuses on practical usability, accessibility, clean code, and dependable WordPress behavior.
Features
- 100 spinner styles across 8 categories: Classic, Dots, Bars, Shapes, Animated, Text, Colorful, and Indicators
- Live preview in the settings screen
- Primary and secondary color controls
- Spinner size control from 16px to 240px
- Overlay opacity control
- Overlay blur control
- Fade-out speed setting
- Minimum display time setting
- Z-index control for visual conflict resolution
- Exclude links by CSS selector
- Exclude pages by URL path
- Show or hide on external links
- Show or hide on WordPress admin bar links
- Show or hide on standard form submissions
- Automatically ignores common file downloads, email links, phone links, hash links, and new-tab links
- WooCommerce cart, checkout, and account page safeguards
- Reduced-motion support for visitors who prefer less animation
- Accessible overlay state using ARIA attributes
- Vanilla JavaScript on the frontend
- No frontend jQuery dependency
- Works with most WordPress themes and standard page builders
- Includes a discrete link to WPClearPath.com from the plugin screen and settings sidebar
Security and Accessibility Notes
AeroSpin CSS Loading Spinners uses a narrow spinner HTML allowlist instead of broad post-content HTML sanitization. Settings are normalized through a central schema before saving and before frontend output. Frontend dynamic styling is served via an external stylesheet endpoint (admin-post.php?action=acls_dynamic_css or legacy pure_css_spinners_dynamic_css) to eliminate inline <style> injection, fully support strict Content Security Policy (CSP) environments, and leverage browser caching. Frontend configuration is exported through encoded configuration data instead of misusing translation-only localization patterns for general configuration.
Spinner markup, colors, timing values, paths, selectors, and display options are sanitized before use. The loading overlay uses ARIA state updates and respects browser-level reduced-motion preferences. Visitors who prefer reduced motion receive a simplified animation experience.
Debugging and Output Safety
The plugin files are designed to avoid accidental output during plugin load and activation. Files should be saved as UTF-8 without BOM and should not include closing PHP tags. During debugging, AeroSpin CSS Loading Spinners can store a small option-based bootstrap debug log when WP_DEBUG is enabled. This helps diagnose unexpected activation output without writing directly to custom log files from production plugin code.
Usage
- Install and activate the plugin.
- Go to AeroSpin Spinners in your WordPress admin sidebar (or Settings AeroSpin CSS Loading Spinners).
- Choose your preferred spinner style from the style grid.
- Customize size, color, overlay opacity, blur, timing, and exclusions.
- Save settings.
Excluding Specific Links
Add the class no-acls-spinner (or no-pure-css-spinner, no-cps-spinner) to any <a> tag to skip the spinner for that specific link. Example:
<a href="/example/" class="no-acls-spinner">Example Link</a>
You can also use Exclude Link Selectors in the settings panel to skip entire groups of links using CSS selectors. Examples:
.no-loader.skip-spinner a#special-link
Excluding Specific Pages
Use Exclude URL Paths to prevent the spinner from loading on selected paths. Examples:
/contact/shop/cart/checkout
Each path should be placed on its own line.
Custom CSS Notice
Earlier versions included an editable Custom CSS textarea. During the 1.1.4 security-focused repair pass, active Custom CSS editing was paused while the plugin moves away from inline CSS and toward safer external stylesheet handling. Existing saved Custom CSS values are preserved, but the settings UI no longer encourages inline style injection.
WPClearPath.com Resources
Explore AeroSpin CSS Loading Spinners, documentation, updates, and more WordPress tools from WPClearPath.com:
https://wpclearpath.com
Installation
- Upload the
aerospin-css-loading-spinnersfolder to your/wp-content/plugins/directory. - Activate the plugin through the Plugins menu in WordPress.
- Visit AeroSpin Spinners in your admin menu (or Settings AeroSpin CSS Loading Spinners) to configure your overlay.
- Choose a spinner style, adjust appearance and timing, then save your settings.
FAQ
-
Does this work with page builders?
-
Yes. AeroSpin CSS Loading Spinners works with most standard WordPress themes and page builders. The frontend script avoids running inside iframe-based editing contexts, which helps prevent interference with editors such as the Customizer and visual page builders.
-
Can I exclude the spinner on specific pages?
-
Yes. Use the Exclude URL Paths setting to list paths where the spinner should not appear. Example:
/contact -
Can I exclude specific links?
-
Yes. Add the
no-acls-spinner,no-pure-css-spinner, orno-cps-spinnerclass to a link, or use the Exclude Link Selectors setting for broader selector-based exclusions. -
Will this slow down my site?
-
AeroSpin CSS Loading Spinners is designed to stay lightweight. It uses a frontend stylesheet and a vanilla JavaScript file without requiring jQuery on the frontend.
-
Does it show on file downloads?
-
No. Common file downloads are automatically ignored. The script skips links with the
downloadattribute and common file extensions such as PDF, ZIP, images, audio, video, office documents, CSV, JSON, and XML files. -
Does it run on WooCommerce cart or checkout pages?
-
No. AeroSpin CSS Loading Spinners includes safeguards for WooCommerce cart, checkout, and account pages to help prevent conflicts with cart fragments, checkout updates, and account-area interactions.
-
Does it support reduced motion?
-
Yes. AeroSpin CSS Loading Spinners includes reduced-motion handling for visitors whose browser or operating system is configured to reduce animation.
-
Can I use custom colors?
-
Yes. The settings panel includes primary and secondary color controls. During the 1.1.4 repair pass, the frontend styling was shifted toward safer class-based states and external stylesheet handling.
-
Why was Custom CSS paused?
-
Custom CSS editing was paused as part of the security and maintainability repair pass. The goal is to avoid runtime inline style injection and move future advanced styling into safer stylesheet-based handling.
-
Where can I learn more?
-
Visit WPClearPath.com for plugin documentation, updates, and more WPClearPath.com tools.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“AeroSpin CSS Loading Spinners” is open source software. The following people have contributed to this plugin.
Contributors
Translate “AeroSpin CSS Loading Spinners” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.1.6
- Renamed plugin to AeroSpin CSS Loading Spinners (slug: aerospin-css-loading-spinners) with aliases for AreoSpin_Css_Loading_Spinners and Pure_CSS_Spinners.
- Added full backward-compatibility layer for legacy Pure_CSS_Spinners classes, functions, filters, actions, transients, and custom JS events.
- Fixed corrupted UTF-8 Mojibake gear icons and en-dashes across admin navigation and documentation tables.
- Fixed live preview diagnostic stat badges (Size, Opacity, Blur, Active Style) to synchronously update during user interaction.
- Implemented persistent transient caching for get_settings() (12h TTL) and get_categories() (24h TTL) with auto-invalidation on save.
- Hardened link bypass checking with .no-acls-spinner and .no-aerospin classes alongside legacy .no-pure-css-spinner.
- Corrected z-index help text default value to 99999 aligning with the schema default.
- Fully updated all headers and documentation to WPClearPath.com.
1.1.5
- Fixed category tabs filtering in admin settings grid by correcting data-category attribute lookup.
- Restored dynamic color rendering for primary, secondary, and overlay colors on frontend loader and admin live preview.
- Fixed preservation of existing custom CSS settings by passing current value in hidden form field.
- Standardized internal procedural helper calls to use modern pure_css_spinners_* function prefix.
- Added missing cache transient keys to uninstallation routine.
1.1.4
- Updated settings handling to use centralized normalization and sanitization.
- Replaced broad spinner HTML sanitization with a narrow spinner-specific allowlist.
- Expanded allowed spinner markup for safer SVG-compatible loader support.
- Hardened public script configuration validation.
- Replaced general configuration usage of
wp_localize_script()with safer JSON-encoded inline configuration output. - Removed runtime custom CSS injection from the public frontend.
- Preserved existing Custom CSS values while pausing active Custom CSS editing in the admin UI.
- Added safer class-based overlay states for opacity, blur, fade speed, size, and z-index.
- Added reduced-motion support for admin preview and public overlay behavior.
- Improved ARIA state handling for the frontend loading overlay.
- Improved admin spinner selection accessibility.
- Improved admin notice placement so third-party notices are moved above the AeroSpin CSS Loading Spinners UI.
- Added mutation-observer support for notices injected after page load.
- Added safer cache cleanup for settings and spinner registry transients.
- Added option-based bootstrap debug logging for unexpected activation output when
WP_DEBUGis enabled. - Updated uninstall cleanup to remove settings, messages, settings cache, spinner category cache, and bootstrap debug log data.
- Added multisite uninstall cleanup hardening.
- Removed invalid CSS functions such as Sass-only
lighten()anddarken()from public styles. - Improved frontend handling for ignored links, file links, hash links, email links, phone links, new-tab links, AJAX requests, REST requests, and iframe contexts.
- Updated admin styles to remove duplicate sections and improve responsive behavior.
- Added safer single-spinner retrieval helper compatibility for frontend rendering.
1.1.3
- Improved admin interface styling.
- Added expanded spinner categories and preview refinements.
- Improved settings page layout and sidebar help content.
1.0.0
- Initial release.
- Added 32 responsive spinner styles.
- Added settings panel with spinner selection, color controls, overlay controls, timing controls, and exclusion rules.