StichyX Bar

Deskripsyon

StichyX Bar is a lightweight WordPress plugin for creating animated progress bars, skill groups, and charts. Scroll-triggered animations bring data to life with customizable colors, icons, counters, and confetti celebrations. Choose from horizontal, vertical, or circular styles with solid, striped, or gradient fills. The intuitive admin builder generates shortcodes instantly — no coding needed. Includes Elementor widget, Gutenberg block, and ACF integration for dynamic data. Fully responsive, SEO-friendly, and optimized for speed with vanilla JavaScript.

✨ Key Features

🎨 Multiple Bar Types
– Horizontal – Classic, clean progress bars
– Circular (SVG) – Modern ring-style progress indicators
– Vertical – Tall, bottom-to-top filling bars

🚀 Smart Animations
– Scroll-triggered (animates when bar enters viewport)
– Hover-triggered (animates on mouse hover)
– Click-triggered (animates on click for interactive experiences)
– Reading Progress Mode – Sticky scroll progress for blog posts

🎯 Goal Tracking & Celebrations
– Set a goal value to track against
– Confetti Burst 🎉 – celebrates when goal is reached
– Milestone Flag 🏁 – visual marker at the goal position

🌈 Customization
– Custom colors (per bar or global)
– Solid, Striped, or Gradient fill styles
– Custom icons/emojis inside the bar
– Animated counter numbers
– Adjustable animation speed (500–5000ms)

📦 Group Builder (Skill Grids)
– Display multiple bars in a grid (1–3 columns)
– Staggered animations (bars pop one after another)
– Perfect for skill sets, feature comparisons, or team stats

🔌 Page Builder Support
– Elementor Widget – Drag & drop, live preview
– Gutenberg Block – Visual block editor support

📊 Dynamic Data (ACF Integration)
– Pull live data from Advanced Custom Fields
– Auto-updating progress bars (no manual editing!)
– Works with percent="acf:my_field" and number="acf:my_field"

⚙️ Powerful Admin Panel
– Clean, modern, visual shortcode builder
– Single Bar Builder – Live preview with sliders & inputs
– Group Builder – Textarea input with visual controls
– Chart Builder – Interactive charts with Chart.js
– One-click copy to clipboard
– Global settings for type, style, duration, trigger, and mode

🚀 Performance
– Zero external libraries (pure vanilla JavaScript)
– Lightweight & fast
– Responsive on all devices
– SEO-friendly semantic HTML

💡 Why Choose StichyX Bar?

Unlike other progress bar plugins that are clunky or limited, StichyX Bar offers:

• No coding required – Build bars visually in the admin panel
• No CSS/JS expertise needed – Everything is pre-styled and animated
• Works everywhere – Shortcode, Gutenberg, Elementor, widgets
• ACF integration – Perfect for dynamic sites
• Regular updates – Actively maintained and improved

Usage

🎯 Quick Start

1. Go to Admin → StichyX
2. Adjust your Global Settings (type, style, duration, etc.)
3. Use the Single Bar, Group Builder, or Chart Builder
4. Click Copy and paste the shortcode anywhere!

📝 Shortcode Examples

Single Bar:

[progress_bar percent=”85″ number=”850″ label=”Sales Growth” goal=”800″ icon=”🚀”]

Circular Bar:

[progress_bar type=”circle” percent=”75″ number=”750″ label=”Completion” icon=”🎯”]

Vertical Bar:

[progress_bar type=”vertical” percent=”60″ number=”600″ label=”Progress” icon=”📈”]

Reading Progress (Sticky):

[progress_bar mode=”reading” number=”100″ label=”Reading Progress” icon=”📖”]

Countdown Mode:

[progress_bar mode=”countdown” percent=”30″ number=”30″ label=”Stock Remaining” icon=”⏳”]

ACF Dynamic Data:

[progress_bar percent=”acf:completion_percent” number=”acf:total_sales” goal=”acf:target_goal” label=”Dynamic Progress”]

Group Builder (Skill Grid)

[progress_group columns=”2″ stagger=”300″]
[bar percent=”90″ label=”HTML” icon=”⚡” color=”#e34c26″]
[bar percent=”75″ label=”CSS” icon=”🎨” color=”#264de4″]
[bar percent=”60″ label=”JavaScript” icon=”🚀” color=”#f0db4f”]
[/progress_group]

Chart Builder

[stichyx_chart type=”bar” labels=”HTML,CSS,JS,Python” values=”90,75,60,85″ title=”Skill Levels”]

Additional Info

Author: Md. Tanvir Ahmed
Author URI: https://i-am-tanvir.netlify.app/

License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html