StichyX Bar

Àpèjúwe

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
Ìtumọ̀ Yorùbá: – Horizontal – Classic, clean progress bars
Ìtumọ̀ Yorùbá: – Circular (SVG) – Modern ring-style progress indicators
Ìtumọ̀ Yorùbá: – Vertical – Tall, bottom-to-top filling bars

🚀 Smart Animations
Ìtumọ̀ Yorùbá: – Scroll-triggered (animates when bar enters viewport)
Ìtumọ̀ Yorùbá: – Hover-triggered (animates on mouse hover)
Ìtumọ̀ Yorùbá: – Click-triggered (animates on click for interactive experiences)
Ìtumọ̀ Yorùbá: – Reading Progress Mode – Sticky scroll progress for blog posts

🎯 Goal Tracking & Celebrations
Ìtumọ̀ Yorùbá: – Set a goal value to track against
Ìtumọ̀ Yorùbá: – Confetti Burst 🎉 – celebrates when goal is reached
Ìtumọ̀ Yorùbá: – Milestone Flag 🏁 – visual marker at the goal position

🌈 Customization
Ìtumọ̀ Yorùbá: – Custom colors (per bar or global)
Ìtumọ̀ Yorùbá: – Solid, Striped, or Gradient fill styles
Ìtumọ̀ Yorùbá: – Custom icons/emojis inside the bar
Ìtumọ̀ Yorùbá: – Animated counter numbers
Ìtumọ̀ Yorùbá: – Adjustable animation speed (500–5000ms)

📦 Group Builder (Skill Grids)
Ìtumọ̀ Yorùbá: – Display multiple bars in a grid (1–3 columns)
Ìtumọ̀ Yorùbá: – Staggered animations (bars pop one after another)
Ìtumọ̀ Yorùbá: – Perfect for skill sets, feature comparisons, or team stats

🔌 Page Builder Support
Ìtumọ̀ Yorùbá: – Elementor Widget – Drag & drop, live preview
Ìtumọ̀ Yorùbá: – Gutenberg Block – Visual block editor support

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

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

🚀 Performance
Ìtumọ̀ Yorùbá: – Zero external libraries (pure vanilla JavaScript)
Ìtumọ̀ Yorùbá: – Lightweight & fast
Ìtumọ̀ Yorùbá: – Responsive on all devices
Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ″ number=”850Ìtumọ̀ Yorùbá: ″ label=”Sales Growth” goal=”800Ìtumọ̀ Yorùbá: ″ icon=”🚀”]

Circular Bar:

[progress_bar type=”circle” percent=”75Ìtumọ̀ Yorùbá: ″ number=”750Ìtumọ̀ Yorùbá: ″ label=”Completion” icon=”🎯”]

Vertical Bar:

[progress_bar type=”vertical” percent=”60Ìtumọ̀ Yorùbá: ″ number=”600Ìtumọ̀ Yorùbá: ″ label=”Progress” icon=”📈”]

Reading Progress (Sticky):

[progress_bar mode=”reading” number=”100Ìtumọ̀ Yorùbá: ″ label=”Reading Progress” icon=”📖”]

Countdown Mode:

[progress_bar mode=”countdown” percent=”30Ìtumọ̀ Yorùbá: ″ number=”30Ìtumọ̀ Yorùbá: ″ 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Ìtumọ̀ Yorùbá: ″ stagger=”300Ìtumọ̀ Yorùbá: ″]
[bar percent=”90Ìtumọ̀ Yorùbá: ″ label=”HTML” icon=”⚡” color=”#e34c26Ìtumọ̀ Yorùbá: ″]
[bar percent=”75Ìtumọ̀ Yorùbá: ″ label=”CSS” icon=”🎨” color=”#264de4Ìtumọ̀ Yorùbá: ″]
[bar percent=”60Ìtumọ̀ Yorùbá: ″ label=”JavaScript” icon=”🚀” color=”#f0db4f”]
[/progress_group]

Chart Builder

[stichyx_chart type=”bar” labels=”HTML,CSS,JS,Python” values=”90,75,60,85Ìtumọ̀ Yorùbá: ″ 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