{"id":396356,"date":"2024-03-25T08:00:00","date_gmt":"2024-03-25T08:00:00","guid":{"rendered":"https:\/\/www.weixiaoduo.com\/plugins\/blog-reading-progress-bar\/"},"modified":"2025-07-15T02:39:00","modified_gmt":"2025-07-15T02:39:00","slug":"blog-reading-progress-bar","status":"publish","type":"post","link":"https:\/\/www.weixiaoduo.com\/plugins\/blog-reading-progress-bar\/","title":{"rendered":"Reading Progress Bar"},"content":{"rendered":"<p>The Reading Progress Bar plugin adds a beautiful, customizable progress bar to your blog posts, allowing readers to see how much they have scrolled through the content. This feature helps to enhance the reading experience and provides a visual indication of the user\u2019s progress.<\/p>\n<p><strong>Key Features:<\/strong><br \/>\n\u2013 \ud83c\udfa8 <strong>Modern Dashboard<\/strong>: Beautiful, intuitive admin interface with live preview<br \/>\n\u2013 \ud83c\udf08 <strong>Advanced Customization<\/strong>: Gradient colors, shadows, borders, and effects<br \/>\n\u2013 \ud83d\udcf1 <strong>Responsive Design<\/strong>: Works perfectly on desktop, tablet, and mobile<br \/>\n\u2013 \u26a1 <strong>Performance Optimized<\/strong>: Smooth animations and efficient code<br \/>\n\u2013 \ud83c\udfaf <strong>Per-Post Control<\/strong>: Enable\/disable for individual posts<br \/>\n\u2013 \ud83d\udcca <strong>Reading Time<\/strong>: Display estimated reading time<br \/>\n\u2013 \ud83c\udfaa <strong>Live Preview<\/strong>: See changes in real-time as you adjust settings<\/p>\n<h3>Features<\/h3>\n<h3>Core Functionality<\/h3>\n<ul>\n<li><strong>Reading Progress Tracking<\/strong>: Real-time progress bar that shows how much of the post has been read<\/li>\n<li><strong>Per-Post Control<\/strong>: Enable\/disable progress bar for individual posts<\/li>\n<li><strong>Reading Time Estimation<\/strong>: Display estimated reading time for posts<\/li>\n<li><strong>Responsive Design<\/strong>: Works perfectly on desktop, tablet, and mobile devices<\/li>\n<\/ul>\n<h3>Advanced Customization<\/h3>\n<ul>\n<li><strong>Color Options<\/strong>:\n<ul>\n<li>Solid color picker with WordPress native color picker<\/li>\n<li>Gradient color support with start and end colors<\/li>\n<li>Custom shadow colors and effects<\/li>\n<li>Border color and width customization<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Visual Effects<\/h3>\n<ul>\n<li><strong>Position Control<\/strong>: Place progress bar at top or bottom of screen<\/li>\n<li><strong>Size Customization<\/strong>: Adjustable height (1-20px)<\/li>\n<li><strong>Border Radius<\/strong>: Rounded corners (0-50px)<\/li>\n<li><strong>Opacity Control<\/strong>: Adjust transparency (0.1-1.0)<\/li>\n<li><strong>Shadow Effects<\/strong>: Customizable shadow with color and blur options<\/li>\n<li><strong>Border Styling<\/strong>: Optional border with custom color and width<\/li>\n<\/ul>\n<h3>User Experience<\/h3>\n<ul>\n<li><strong>Smooth Animations<\/strong>: Fluid progress updates with CSS transitions<\/li>\n<li><strong>Performance Optimized<\/strong>: Uses requestAnimationFrame for smooth scrolling<\/li>\n<li><strong>Keyboard Navigation<\/strong>: Space bar and arrow key support<\/li>\n<li><strong>Touch Gestures<\/strong>: Swipe support for mobile devices<\/li>\n<li><strong>Accessibility<\/strong>: High contrast mode and reduced motion support<\/li>\n<\/ul>\n<h3>Dashboard Features<\/h3>\n<ul>\n<li><strong>Modern Admin Interface<\/strong>: Beautiful, responsive dashboard with tabs<\/li>\n<li><strong>Live Preview<\/strong>: See changes in real-time as you adjust settings<\/li>\n<li><strong>Statistics<\/strong>: View posts with progress bar enabled vs total posts<\/li>\n<li><strong>Organized Settings<\/strong>: Grouped options for easy configuration<\/li>\n<\/ul>\n<h3>Configuration<\/h3>\n<h3>Basic Settings<\/h3>\n<ol>\n<li>Navigate to <strong>Settings > Reading Progress Bar<\/strong><\/li>\n<li>Configure appearance options:\n<ul>\n<li><strong>Color<\/strong>: Choose solid color or enable gradient<\/li>\n<li><strong>Height<\/strong>: Set progress bar height (1-20px)<\/li>\n<li><strong>Position<\/strong>: Top or bottom of screen<\/li>\n<li><strong>Border Radius<\/strong>: Add rounded corners<\/li>\n<li><strong>Opacity<\/strong>: Adjust transparency<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>Advanced Effects<\/h3>\n<ul>\n<li><strong>Shadow<\/strong>: Enable shadow with custom color and blur<\/li>\n<li><strong>Border<\/strong>: Add border with custom color and width<\/li>\n<li><strong>Gradient<\/strong>: Use gradient colors instead of solid color<\/li>\n<\/ul>\n<h3>Display Settings<\/h3>\n<ul>\n<li><strong>Show on Posts<\/strong>: Enable\/disable for blog posts<\/li>\n<li><strong>Show on Pages<\/strong>: Enable\/disable for pages<\/li>\n<li><strong>Show Reading Time<\/strong>: Display estimated reading time<\/li>\n<\/ul>\n<h3>Per-Post Settings<\/h3>\n<ul>\n<li>Edit any post and look for the \u201cReading Progress Bar\u201d meta box<\/li>\n<li>Check\/uncheck to enable\/disable for that specific post<\/li>\n<\/ul>\n<h3>Requirements<\/h3>\n<ul>\n<li>WordPress 5.6 or higher<\/li>\n<li>PHP 7.3 or higher<\/li>\n<li>jQuery (included with WordPress)<\/li>\n<\/ul>\n<h3>License<\/h3>\n<p>This plugin is released under the GPL-2.0+ license. You can find a copy of the license in the <code>license.txt<\/code> file or visit <a href=\"http:\/\/www.gnu.org\/licenses\/gpl-2.0.txt\" rel=\"nofollow ugc\">http:\/\/www.gnu.org\/licenses\/gpl-2.0.txt<\/a> for more information.<\/p>\n<h3>Support<\/h3>\n<p>For support, feature requests, or bug reports, please visit the <a href=\"https:\/\/ifatwp.wordpress.com\/2023\/10\/17\/blog-reading-progress\/\" rel=\"nofollow ugc\">plugin page<\/a> or create an issue on GitHub.<\/p>\n<p><strong>Made with \u2764\ufe0f for the WordPress community<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A modern WordPress plugin that adds a customizable reading progress bar to your blog posts with advanced styling options.<\/p>\n","protected":false},"author":65,"featured_media":396357,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Reading Progress Bar - \u8587\u6653\u6735\u63d2\u4ef6\u76ee\u5f55","description":"A modern WordPress plugin that adds a customizable reading progress bar to your blog posts with advanced styling options."},"footnotes":""},"categories":[1],"tags":[465,542,5830,5832,1786],"class_list":["post-396356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-blog","tag-posts","tag-progress-bar","tag-reading-time","tag-user-experience"],"_links":{"self":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/396356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/comments?post=396356"}],"version-history":[{"count":0,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/396356\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media\/396357"}],"wp:attachment":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media?parent=396356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/categories?post=396356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/tags?post=396356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}