mdtanvirahmed

<p>StichyX Bar is a lightweight and versatile WordPress plugin designed to enhance user engagement on your website by incorporating dynamic progress bars that animate smoothly as users scroll through your content. Built with performance in mind, this plugin leverages pure CSS and JavaScript to deliver eye-catching visual effects without compromising page load times. Whether you’re showcasing project completion, skill levels, fundraising goals, or any metric-driven data, StichyX Bar provides an intuitive way to present information in an interactive and modern format.</p>
<h3>Key Features</h3>
<ul>
<li><strong>Scroll-Triggered Animation</strong>: Progress bars only animate when they enter the viewport, ensuring a seamless user experience and reducing unnecessary resource usage.</li>
<li><strong>Shortcode Flexibility</strong>: Easily customize bars with attributes like percentage fill, animated numbers, custom labels, and colors, making it adaptable for various content types.</li>
<li><strong>Section-Based Fallbacks</strong>: Automatically apply predefined colors based on parent section classes (e.g., red, blue, or dark themes), simplifying styling for developers who prefer class-based theming.</li>
<li><strong>Responsive Design</strong>: Bars scale beautifully across devices, from desktops to mobile screens, maintaining readability and aesthetics.</li>
<li><strong>No Dependencies</strong>: Relies solely on WordPress core functions, with no external libraries required, ensuring broad compatibility and easy maintenance.</li>
<li><strong>SEO-Friendly</strong>: Generates clean, semantic HTML that search engines can easily index, while keeping JavaScript unobtrusive.</li>
</ul>
<p>Ideal for portfolios, business websites, blogs, and e-commerce sites, StichyX Bar helps transform static data into compelling visual stories. The plugin is actively maintained, with regular updates to improve functionality and security. For support or customizations, reach out to the author at https://i-am-tanvir.netlify.app/. Compatible with WordPress 5.0+ and tested up to version 7.0.</p>
<h3>Usage</h3>
<p>Use the <code>[progress_bar]</code> shortcode anywhere on your site.</p>
<h3>Basic Example</h3>
<pre><code>[progress_bar percent="75"]
</code></pre>
<h3>Advanced Example</h3>
<pre><code>[progress_bar percent="85" number="850" label="Sales Growth" color="#ff5733"]<h3>Shortcode Attributes</h3>
</code></pre>
<p>* <code>percent</code> (required): Percentage value for the progress fill (0-100). Default: 50<br />
* <code>number</code>: Number to animate beside the bar. Default: 0<br />
* <code>label</code>: Optional label displayed above the bar.<br />
* <code>color</code>: Custom fill color in hex or color name.</p>
<h3>Section-Based Color Fallbacks</h3>
<p>If you prefer not to use the <code>color</code> attribute, the plugin can apply fallback colors based on section classes:<br />
* <code>.bg-red</code> <span aria-hidden="true" class="wp-exclude-emoji">→</span> red (#ff4d4d)<br />
* <code>.bg-blue</code> <span aria-hidden="true" class="wp-exclude-emoji">→</span> blue (#4d79ff)<br />
* <code>.bg-dark</code> <span aria-hidden="true" class="wp-exclude-emoji">→</span> dark (#111)</p>
<h3>Example</h3>
<pre><code><section class="bg-red">
    [progress_bar percent="60" number="600"]
</section>
</code></pre>


StichyX Bar

A lightweight WordPress plugin for animated progress bars with shortcode controls and responsive scroll effects.

Harun R. Rayhan(thecrazycoder)

<p>Simple circle animated progress bar.<br />
No limit to use. </p>
<p>Demo link: http://www.crazy-coder.com/plugins/cc-circle-progress-bar/</p>
<p><strong>Features</strong><br />
1. It will show any type of progressbar.<br />
2. You can controll height and width.<br />
3. You can control thickness.</p>
<p><strong>Usages</strong><br />
Just use <code>[progressbar]</code> short code.</p>
<p>Simple usage instruction:<br />
1. Install This plug in your WordPress Site</p>
<ol>
<li>
<p>Usage <code>[progressbar]</code> this shortcode where you want to use it.</p>
</li>
<li>
<p>You can control this shortcode via attributes. There is all attributes. <br />
    id=”1″ => ID of every progressbar. Default value <code>1</code>. Must change this value if you add more then one progress bar in post or page.<br />
    dimen=”250″ => Height and width. Default value <code>250</code>. You can control height and width via this.<br />
    text=”90%” => Text in the circle. Default value <code>90%</code>. Change it with your text or you can keep it blank if you don’t wanna put any text.<br />
    info=”Photoshop” => Information of the circle, it shown under text. Default value <code>Photoshop</code>. Change it with your text or you can keep it blank if you don’t wanna put any text.<br />
    width=”10″ => Thickness of bar. Default value <code>10</code>. You can change it with your with your value.<br />
    fontsize=”25″ => Font size of text. Default value <code>25</code>. You can change it with your with your value.<br />
    percent=”90″ => Percent of progress. Default value <code>90</code>. You can change it with your with your value, value should be in 1 to 100.<br />
    fgcolor=”#eee” => Foreground colour of progress. Default value <code>#eee</code>. You can change it with your with your value, value should be in RGB colour format start with Hash <code>(#)</code>.<br />
    bgcolor=”#000″ => Background colour of progress. Default value <code>#000</code>. You can change it with your with your value, value should be in RGB colour format start with Hash <code>(#)</code>.<br />
    fillcolor=”#000″ => Fill colour of progress. Default value <code>none</code>. You can change it with your with your value, value should be in RGB colour format start with Hash <code>(#)</code>.<br />
    type=”full” => Type of progress. Default value <code>full</code>. You can its value as <code>half</code> of <code>full</code> for showing half or full view of progressbar.<br />
    border=”outline” => Border type of progress. Default value <code>outline</code>. You can its value as <code>outline</code> of <code>inline</code>.</p>
</li>
<li>
<p>So, what right now? 🙂 It example time.<br />
Example 1: Without any attribute.<br />
    [progressbar]</p>
<p>Example 2: With every attribute.<br />
    [progressbar id=”1″ dimen=”250″ text=”90%” info=”Photoshop” width=”10″ fontsize=”25″ percent=”90″ fgcolor=”#eee” bgcolor=”#000″ fillcolor=”#000″ type=”full” border=”outline”]</p>
<p>Example 3: For inline border.<br />
    [progressbar id=”1″ dimen=”250″ text=”90%” info=”Photoshop” width=”10″ fontsize=”25″ percent=”90″ fgcolor=”#eee” bgcolor=”#000″ fillcolor=”#000″ type=”full” border=”inline”]</p>
<p>Example 4: For half circle.<br />
    [progressbar id=”1″ dimen=”250″ text=”90%” info=”Photoshop” width=”10″ fontsize=”25″ percent=”90″ fgcolor=”#eee” bgcolor=”#000″ fillcolor=”#000″ type=”half” border=”inline”]</p>
</li>
<li>
<p>If you have any problem to use this plugin feel free to submit a ticket in plug in forum.</p>
</li>
<li>
<p>You can use this in you theme by Place <code><?php do_action('Your Shortcode'); ?></code> in your templates</p>
</li>
</ol>
<h3>Arbitrary section</h3>
<p>You may provide arbitrary sections, in the same format as the ones above.  This may be of use for extremely complicated<br />
plugins where more information needs to be conveyed that doesn’t fit into the categories of “description” or<br />
“installation.”  Arbitrary sections will be shown below the built-in sections outlined above.</p>
<h3>A brief Markdown Example</h3>
<p>Ordered list:</p>
<ol>
<li>Some feature</li>
<li>Another feature</li>
<li>Something else about the plugin</li>
</ol>


CC Circle Progress Bar

Simple circle animated progress bar. It will Show any progress data by animation.

StichyX Bar vs CC Circle Progress Bar