Title: DWL Preloader Author: Gazi Mohammad Yeasin Published: 2014 年 9 月 3 日 Last modified: 2026 年 4 月 3 日 --- 搜索插件 ![](https://ps.w.org/dwl-preloader/assets/banner-772x250.png?rev=1319775) ![](https://ps.w.org/dwl-preloader/assets/icon-128x128.png?rev=2664042) # DWL Preloader 作者：[Gazi Mohammad Yeasin](https://profiles.wordpress.org/yeasin62/) [下载](https://downloads.wordpress.org/plugin/dwl-preloader.3.0.zip) * [详情](https://cn.wordpress.org/plugins/dwl-preloader/#description) * [评价](https://cn.wordpress.org/plugins/dwl-preloader/#reviews) * [安装](https://cn.wordpress.org/plugins/dwl-preloader/#installation) * [开发进展](https://cn.wordpress.org/plugins/dwl-preloader/#developers) [支持](https://wordpress.org/support/plugin/dwl-preloader/) ## 描述 **DWL Preloader** displays an animated loading screen while your WordPress site loads. It comes with **10 unique SVG-based preloader animations** that you can preview and select directly from the WordPress admin panel. Whether you want a sleek spinner, bouncing dots, a heartbeat line, or a morphing blob — DWL Preloader has something for every website style. #### ✨ Key Features * **10 Unique Preloader Styles** — All built with pure SVG animations, no external libraries needed. * **Live Preview in Admin** — Click any preloader style in the admin panel and see it animate in real time before saving. * **Background Color Picker** — Choose any background color for the preloader overlay to match your brand. * **Enable / Disable Toggle** — Instantly enable or disable the preloader from the settings panel without deactivating the plugin. * **Lightweight & Fast** — Pure SVG animations with no dependencies. No GIF files, no heavy JavaScript. * **Auto-dismiss** — The preloader fades out smoothly after the page finishes loading. * **Theme Compatible** — Works with any WordPress theme. Supports `wp_body_open` hook with a `wp_footer` fallback for maximum compatibility. * **No Shortcodes Needed** — Just install, activate, configure, and it works automatically on every page. * **Settings Saved Instantly** — All settings are stored in the WordPress options table and applied site-wide. #### 🎨 Preloader Styles 1. **Triple Ring** — Three concentric rings spinning in opposite directions with different speeds and colors. 2. **Bouncing Dots** — Four colorful dots bouncing in a rhythmic wave pattern. 3. **Ripple Pulse** — A pulsing dot with three expanding ripple rings that fade out. 4. **Wave Bars** — Five vertical bars animating like an audio equalizer wave. 5. **Orbit Dots** — Colored dots orbiting a central point like planets in a solar system. 6. **Rotating Square** — Nested squares rotating in opposite directions with a glowing center. 7. **Morphing Blob** — A fluid shape that continuously morphs and changes color. 8. **Heartbeat** — An animated ECG-style heartbeat line that draws itself repeatedly. 9. **Hexagon Spin** — Two hexagons rotating in opposite directions with a pulsing center. 10. **Spiral Galaxy** — Multiple dots orbiting at different radii and speeds, like a galaxy. #### 🛠 How It Works 1. Install and activate the plugin. 2. Go to **DWL Preloader** in your WordPress admin menu. 3. Click on any preloader style card to preview it live. 4. Optionally pick a background color and toggle the preloader on or off. 5. Click **Save Settings** — your visitors will now see the selected preloader when they visit your site. ## 屏幕截图 [⌊Admin settings panel showing all 10 preloader styles with live preview.⌉⌊Admin settings panel showing all 10 preloader styles with live preview.⌉[ Admin settings panel showing all 10 preloader styles with live preview. [⌊Background color picker and enable/disable toggle in the sidebar.⌉⌊Background color picker and enable/disable toggle in the sidebar.⌉[ Background color picker and enable/disable toggle in the sidebar. ## 安装 1. Upload the `dwl-preloader` folder to the `/wp-content/plugins/` directory, or install via **Plugins Add New** in WordPress. 2. Activate the plugin through the **Plugins** menu in WordPress. 3. Navigate to **DWL Preloader** in the admin sidebar. 4. Select your preferred preloader style and save. 5. Visit your website to see the preloader in action. ## 常见问题 ### Will this plugin slow down my website? No. DWL Preloader uses pure inline SVG animations — there are no external image requests or heavy libraries. The total plugin footprint is minimal. ### Can I use a custom background color? Yes. The settings panel includes a color picker that lets you choose any background color for the preloader overlay. ### Does it work with my theme? DWL Preloader is compatible with any properly coded WordPress theme. It uses the` wp_body_open` hook with a `wp_footer` fallback to ensure compatibility across all themes. ### Can I disable the preloader temporarily? Yes. Use the **Enable Preloader** toggle in the settings panel to turn it on or off without deactivating the plugin. ### Does it work with page builders like Elementor or Gutenberg? Yes. The preloader runs at the page level and is independent of any page builder. ## 评价 ![](https://secure.gravatar.com/avatar/da0dbfad0df118f25039df5e7165344d63e71accc68da4b1ef46f68bd02d813b? s=60&d=retro&r=g) ### 󠀁[Simple, I like that.](https://wordpress.org/support/topic/simple-i-like-that/)󠁿 [germanero](https://profiles.wordpress.org/germanero/) 2016 年 9 月 3 日 Works with any version. Thanks. [ 阅读所有4条评价 ](https://wordpress.org/support/plugin/dwl-preloader/reviews/) ## 贡献者及开发者 「DWL Preloader」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ Gazi Mohammad Yeasin ](https://profiles.wordpress.org/yeasin62/) [帮助将「DWL Preloader」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/dwl-preloader) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/dwl-preloader/)，查看 [SVN仓库](https://plugins.svn.wordpress.org/dwl-preloader/)，或通过[RSS](https://plugins.trac.wordpress.org/log/dwl-preloader/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/dwl-preloader/)。 ## 更新日志 #### 3.0 * Complete plugin rewrite with a modern admin interface. * Added 10 unique SVG-based animated preloader styles. * Added live preview: clicking a style instantly previews it in the sidebar. * Added background color picker for the preloader overlay. * Added enable/disable toggle — no need to deactivate the plugin. * Replaced deprecated `jQuery(window).load()` with `jQuery(window).on('load')`. * Added `wp_body_open` hook support with `wp_footer` fallback. * Added activation hook to set default plugin options. * Improved code structure following WordPress coding standards. * All output is properly escaped. #### 2.0 * Initial public release with single spinning ring preloader. ## 额外信息 * 版本 **3.0** * 最后更新：**2 月前** * 活跃安装数量 **100+** * WordPress 版本 ** 5.0 或更高版本 ** * 已测试的最高版本为 **6.9.4** * PHP 版本 ** 7.2 或更高版本 ** * 语言 * [English (US)](https://wordpress.org/plugins/dwl-preloader/) * 标签 * [animated preloader.](https://cn.wordpress.org/plugins/tags/animated-preloader/) [loading screen](https://cn.wordpress.org/plugins/tags/loading-screen/)[page loader](https://cn.wordpress.org/plugins/tags/page-loader/) [preloader](https://cn.wordpress.org/plugins/tags/preloader/)[svg preloader](https://cn.wordpress.org/plugins/tags/svg-preloader/) * [高级视图](https://cn.wordpress.org/plugins/dwl-preloader/advanced/) ## 评级 5 星（最高 5 星）。 * [ 4 条 5 星评价 ](https://wordpress.org/support/plugin/dwl-preloader/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/dwl-preloader/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/dwl-preloader/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/dwl-preloader/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/dwl-preloader/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/dwl-preloader/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/dwl-preloader/reviews/) ## 贡献者 * [ Gazi Mohammad Yeasin ](https://profiles.wordpress.org/yeasin62/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/dwl-preloader/)