Showcase progress and completion using animated fill-up circels

Information, like the progress of a goal, is best understood when it’s presented clearly and in a clean way. With a few tweaks and edits, it is possible to create clear and easy-to-follow circle bars.

Clean Design to Better Follow Set Goals

Style 2

People are different, and some love to add a little color, use elegant design, or showcase their personality through the use of creatively-designed circle bars. With full customization options, it is easy to play with the design until you find the right way to represent your personality. 


Customizable To Deliver Any Mood or Personality

Style 4

Style 5

The Progress Circle Bars widget enables you to add multiple circular progress to show the progress of various projects and other relevant topics.

Multiple Circles

The Animated Progress Circles widget features a gentle "filling up" animation in circular progress, showing the progress more vividly and visually attractively.

Progress Circles Animation

The Progress Circle Bars widget comes available with multiple layouts that you can choose from to fit your website’s design & style.

Multiple Layouts

The Animated Progress Circles widget comes with a variety of beautiful skins that you can choose from so you don’t have to spend much time on extensive customization.

Beautiful Progress Circles Skins

The Animated Progress Circles widget features full customization options so you can edit the design to fit your needs. Change the colors, the fonts, the spacing and anything else!

Fully Customizable

The Progress Circles widget is fully responsive and will look great on any device. This feature will put you ahead of your competitors in a mobile-first world.

Perfectly Responsive Progress Circles

The Progress Circles widget is easy to use and requires no coding knowledge. Our intuitive dashboard with the drag-and-drop feature will enable you to customize the widget any way you’d like to with just a few simple clicks.

Progress Circles Easy To Use

As with all of Common Ninja’s widgets, you can add custom CSS to customize the Animated Progress Circles widget and be even more creative.

Custom CSS

You can easily embed the Progress Circle widget on your website by copying a single line of code. The Progress Circles widget will also be updated automatically with every change you make.

Easy To Embed Progress Circles

With the Animated Progress Circle Bars widget, you can easily show the progress of your projects and inform relevant parties of what stages your project (or various projects) is in. 

Use Progress Circles Showcase Progress

The Progress Circle widget is fully customized. With features like multiple layouts and gentle animation, you can present important information in a visual representation that your users will better understand.

Visual Representation of Data

Specific projects, like a campaign to collect donations, for example, will significantly benefit from a visual representation of how much money has been compiled by encouraging viewers to help complete the Animated Progress Circle Bars. 

Encourage Action with Progress Circles

Use the Progress Circles widget when you want to display progress or completion with a clean, compact visual that stands out in modern layouts. Circles work especially well for dashboards and summaries because they fit tightly into cards, columns, and mobile screens. They can represent percentages, stages, or levels at a glance, helping visitors understand status without reading detailed text. This is ideal for KPIs, fundraising, onboarding steps, course completion, or service performance. Animated fill adds subtle motion that draws attention to your metrics. Clear progress circles reduce confusion, make goals feel tangible, and can motivate users to keep moving forward when progress is part of their journey.

Progress Circles

Website Components

Customizable widget to manage and display business listings on your site.

The Business Listings widget includes predefined fields for essential business details such as name, description, address, contact information, and hours of operation. This ensures that all critical information is well-organized and easily accessible.

Predefined Business Information Fields

Tailor the widget to your specific needs by adding customizable fields. You can include additional details like services offered, business categories, or special promotions to provide comprehensive information.

Customizable Information Fields

Gain valuable insights into business performance and user engagement with built-in analytics. Track views, clicks, and interactions to optimize your listings and understand user behavior.

Detailed Analytics and Insights

Enhance your business listings with visual content. Include images, videos, and other multimedia elements to make your listings more engaging and informative for potential customers.

Visual Content Integration

Customize the display of your business listings to match your website's style. Adjust layout, colors, fonts, and more to create a visually appealing and cohesive presentation.

Flexible Display Customization

Offer advanced search and filter options to users. Allow them to easily find businesses by category, location, services, and other criteria, improving the overall user experience.

Advanced Search and Filter Capabilities

Provide users with customizable sorting options for the business listings. Let them organize businesses by name, date added, popularity, or other parameters for easier navigation.

Custom Sorting Options

Easily integrate the Business Listings widget into your website without any coding knowledge. The simple setup process ensures that users of all technical levels can quickly embed and configure the widget.

Easy Integration Without Coding

Incorporate an interactive map into your business listings. Display business locations on a map to provide users with a visual representation of where each business is located, enhancing navigation and user experience.

Interactive Map Integration

Choose from a variety of ready-to-use design templates for your business listings. These templates save time and effort while ensuring a professional and attractive presentation.

Ready-to-Use Design Templates

Ensure that your business listings look great on any device. The widget's responsive design adapts to desktops, tablets, and smartphones, providing a consistent user experience.

Responsive Design for All Devices

Add custom CSS to the Business Listings widget for advanced styling options. This feature allows developers and designers to apply unique touches and match the widget’s appearance to the website's overall style.

Custom CSS for Advanced Styling

Embed the Business Listings widget seamlessly on any website platform. The widget's compatibility ensures that it integrates smoothly, regardless of the platform you use.

Seamless Embedding on Any Platform

Implementing the Business Listings widget on your website significantly boosts business visibility. By showcasing an organized business directory, potential customers can easily find and explore the businesses you list, leading to increased interest and engagement.

Boost Business Visibility with Business Listings

The Business Listings widget simplifies business discovery for users by organizing listings into an intuitive and searchable format. This ease of navigation allows users to quickly find businesses that match their needs, improving their overall experience.

Simplify Business Discovery for Users

The Business Listings widget enhances your online business directory by displaying businesses prominently on your website. This feature helps attract a wider audience and improves your site's reach.

Enhance Your Online Business Directory

Use the Business Listings widget when you manage or promote multiple companies, branches, or partners and need a directory that feels professional and easy to search. Listing cards with names, locations, categories, and descriptions let visitors scan and compare options without reading long paragraphs. This works for marketplaces, associations, local guides, service directories, and franchised networks. Filters and search help users narrow results to what is relevant to them. By presenting businesses in a unified, well designed format, you add value on top of simple contact information and turn your site into a trusted place to discover providers, not just a static list of links.

Business Listings

Displays a series of images in a slideshow format

Example 1

Example 2

Example 3

Example 4

Example 5

The Image Slider widget features hover effects which will add even an additional layer of visual effects that will make the users’ experience on your pages even more enjoyable.

Image Slider Hover Effect

The Image Slider widget comes with the option to choose from color effects to make your images more unified in style, and to add the “wow” effect to them.

Image Slider Color Effects

The Image Slider widget comes with two layout styles — carousel and grid. You can choose from these to make the widget fit your website’s design.

Image Slider Layout Styles

You can transform the Image Slider into a powerful conversion tool with the option to make the images clickable.

Clickable Images

The Image Slider widget is designed to be fully customizable, allowing you to adjust the design to match the look and feel of your website. With various customization options at your fingertips, you can easily change the colors, fonts, spacing, and other elements to create a button that fits seamlessly into your website design. Whether you're looking to match your brand colors, create a unique look, or personalize your website, the Image Slider widget provides you with all the tools you need to get the job done. With the ability to preview your changes in real-time, you can easily experiment with different styles and design elements until you find the perfect combination that fits your needs and enhances the user experience on your website.

Fully Customizable Image Slider Widget

The Image Slider widget is designed to provide a seamless user experience on any device. With its fully responsive design, the button will look great and function smoothly on desktop computers, laptops, tablets, and smartphones. This is especially important in today's mobile-first world where more and more people are using their smartphones and other mobile devices to browse the web. By ensuring that your website is optimized for all devices, you'll improve the user experience for your visitors and stay ahead of your competitors in terms of functionality and design. With the Image Slider widget, you'll be able to provide your visitors with a fast, easy, and intuitive way to navigate your website no matter what device they use.

Perfectly Responsive Image Slider

The Image Slider widget is easy to use and requires no coding knowledge. Our intuitive dashboard with the drag-and-drop feature will enable you to customize the widget any way you’d like to with just a few simple clicks.

Easy To Use Widget

In addition to the built-in customization options, the Image Slider widget allows you to add your custom CSS to enhance the button further and make it truly unique. Whether you're a seasoned developer or simply looking to get creative, the ability to add custom CSS gives you the power to take your website design to the next level. With custom CSS, you can change the button's size, shape, and positioning, or even create entirely new styles from scratch. The possibilities are endless, and with some creativity, you can make the Image Slider widget your own. This level of customization allows you to create a button that fits perfectly with the look and feel of your website and enhances the overall user experience for your visitors. Whether you're looking to create a sleek, modern design or a more traditional, classic look, the Image Slider widget and its custom CSS capabilities give you the tools you need to make it happen.

Image Slider Custom CSS

You can easily embed the Image Slider widget on your website by copying a single line of code. The Image Slider will also be updated automatically with every change you make.
Copy the code for the button and paste it into your website's HTML code. The code should be placed in the appropriate section of your website, such as the footer or header.

Easy To Embed Image Slider

With the Image Slider widget and animation effect, you’ll easily draw the users’ attention to your images. .

Draw Attention with Image Slider

Once you’ve drawn the users’ attention, you’ll be able to showcase your work, products, or services, in a visually appealing manner. This way, you can increase the chances of converting them into customers.

Showcase Your Products or Services

The Image Slider widget provides powerful customization options that will enable you to customize the widgets as you desire and make them complement your overall website design. The intuitive interface makes it easy for even beginners to create stunning widgets with minimal effort.

Use an Image Slider to Enhance Design

Use the Image Slider widget when you want to tell a visual story step by step in one location on the page. Each slide can show a feature, stage, or variation, and visitors move through them using arrows or controls. This is useful for showcasing product sets, process explanations, or campaigns that unfold in several scenes. The slider keeps the layout clean while still allowing you to present multiple images with context. On mobile, it lets users swipe instead of scrolling endlessly through large photos. Overall, it is a flexible way to combine design and narrative, helping visitors understand more while keeping your layout structured and easy to follow.

Image Slider

Images & Galleries

Showcase statistics, metrics, or countdowns in an animated visually appealing display

With the right background image, fonts and titles, it is possible to tell a whole story and create the right association between a brand, and its impressive numbers.

Visual Storytelling With the Right Background

Style 3

For the more information-delivery-based websites, where numbers play an important part, it’s best to keep the numbers, titles, and associated icons clear and easy to understand. And with the full customization options, and the large selection of icons the widget offers, it’s easy to do just that.

Clean Design With Relevant Icons for Better Understanding

The widget enables not only to create of informative number counters, but aesthetically pleasing ones as well, which will go hand in hand with the website’s design, and play a significant role in creating the right atmosphere.

Setting the Right Mood and Atmosphere

The Animated Number Counter app features an entertaining, eye-catching “counting” animation that is sure to add a sense of action to your website, as well as help focus the user’s attention on important information.

Eye-Catching Animation

The Animated Number Counter app comes with a variety of beautiful skins that you can choose from so you don’t have to spend much time on extensive customization.

Multiple Skins

The Animated Number Counter app features commonly used layouts that you can choose from to fit your web page’s design.

In addition to the option to add images to the number counter, the app has a large selection of icons that you can choose from to add instead of images.

A Robust Set of Icons

You can customize the app any way you see fit, including deciding on what the starting number of the counter will be.

Set Start Number

Do you want to add a plus sign after a number? Or perhaps to denominate that the number refers to users? Or maybe even that the number represents a certain currency? Regardless of what you want to add, you can easily do this by adding a prefix or a suffix to appear before or after the number.

Add a Prefix or Suffix

You can easily add links to the Animated Number Counter app, to improve navigation and increase conversions.

Add Links

You can add a background in the form of an image to really set your number counter apart and to further complement your website’s design direction.

Add & Change a Background

The Animated Number Counter app features full customization options so you can edit the design to fit your needs. Change the colors, the fonts, the spacing and anything else!

The Animated Number Counter app is fully responsive and will look great on any device. In a mobile-first world, this feature will put you ahead of your competitors.

Perfectly Responsive

The Animated Number Counter widget is easy to use and requires no coding knowledge. Our intuitive dashboard with the drag-and-drop feature will enable you to customize the app any way you’d like to with just a few simple clicks.

Easy To Use Number Counter Widget

As with all of Common Ninja’s apps, you can add custom CSS to customize the Animated Number Counter app and be even more creative.

You can embed the app on your website easily by copying a single line of code. The Animated Number Counter app will also be updated automatically with every change you make.

Easy To Embed

With the app, you can add animation to your static pages and make them less boring and more engaging to you your users. Insert the animation in between sections to let your users rest their eyes, or next to a section with lots of text, to highlight the significant bits, or any other way you see fit.

Add Animation to Static Pages

The animation effect of the app makes it so that you can easily draw attention to different stats. And, with its help, you can showcase your strengths — whether it’s the number of users you have, active installation, sales or anything else.

Make Stats More Noticeable

The app is fully customizable, and in addition to the animation effect, it can be customized to complement any page design through a large selection of icons, different layout options, pre-made skins and more.

Enhance Design

Use the Animated Number Counter widget when you want your key metrics to stand out and feel credible at first glance. Numbers like users served, projects completed, savings achieved, or years in business are powerful trust signals, but they are often overlooked in plain text. Animation draws attention to them and makes progress or scale feel real. This is ideal for landing pages, about sections, case studies, and dashboards. By presenting stats in a clean, structured way, you help visitors understand your impact quickly and remember it longer. Strong metrics placed near calls to action can reduce hesitation and support higher conversions because they provide immediate evidence of value.

Animated Number Counter

Get Creative

Choose from Multiple Age Gate Layouts

Age Gate includes a curated set of icons that you can add to the verification popup. These visual elements help reinforce the message, improve clarity, and create a more polished and trustworthy appearance.

Enhance Your Age Gate with Visual Icons

With customizable display rules, Age Gate lets you control exactly how the verification popup is triggered. You can choose actions such as page exit, scroll behavior, timed delays, or specific page conditions to align with your user flow.

Define When and Where the Age Gate Appears

Age Gate supports multiple validation methods, including confirmation buttons, birth year entry, and full date of birth input. This flexibility allows you to tailor the verification process to your legal requirements and design preferences.

Select the Right Age Verification Method

Age Gate allows you to set a custom redirect URL when a visitor does not meet the required age. Instead of blocking access entirely, you can guide users to another page of your choice, creating a smoother and more considerate browsing experience.

Redirect Underage Visitors to the Right Destination

Age Gate includes a selection of ready made visual skins that help you achieve a professional look instantly. These styles reduce the need for heavy customization while ensuring the popup fits naturally within modern website designs.

Apply Prebuilt Skins for a Polished Age Gate

Age Gate gives you full control over colors, fonts, spacing, and layout details. You can fine tune every visual element to match your brand and website style, all through an intuitive editor without technical effort.

Fully Customize the Age Gate Experience

Age Gate adapts automatically to desktop, tablet, and mobile screens, ensuring the verification popup looks and functions properly on any device. This helps you deliver a consistent experience in today’s mobile first browsing environment.

Responsive Age Gate for Every Device

Age Gate is designed for ease of use and does not require coding knowledge. Using a visual editor with drag and drop controls, you can customize the widget quickly and apply changes in just a few clicks.

Simple Setup with No Technical Skills Required

For advanced design needs, Age Gate supports custom CSS. This allows you to fine tune styles, animations, and layout details for a more tailored integration with your website.

Extend Styling with Custom CSS

Adding Age Gate to your website is quick and straightforward. Copy a single embed code and paste it into your site, and any updates you make will automatically appear on your live pages.

Embed Age Gate in Minutes

The Age Gate allows you to restrict access to age sensitive content, products, or services on your website. By verifying visitor age, you can meet local legal requirements for regulated items such as alcohol, tobacco, or adult content while protecting your business and promoting responsible access.

Safeguard Your Website with an Age Gate

The Age Gate popup is fully customizable, giving you control over its look and feel. You can design a visually appealing verification screen that blends seamlessly with your website style while maintaining clarity and trust for visitors.

Create an Age Gate That Matches Your Site Design

Age Gate includes advanced display rules and redirect options to manage how and when the verification appears. Set custom triggers for showing the popup and automatically redirect underage visitors to another page, ensuring compliance without disrupting the user experience.

Control Access with Smart Display Rules and Redirection

Use Age Gate when your website content or products require visitors to meet a legal age requirement. It blocks underage users from accessing restricted areas and helps reduce compliance related risks for your business. This is especially important for industries such as alcohol, vaping, gambling, adult content, and regulated medical products. The verification popup clearly asks visitors to confirm their age before continuing, setting responsibility upfront. By showing that your site follows regulations, you also build trust with legitimate users. Age Gate provides a straightforward solution that avoids complex access systems while still meeting legal standards. Placing the verification at the entry point keeps the rest of your site uncluttered and ensures only the appropriate audience proceeds.

Age Gate

Popups, Bars & Buttons

Embed interactive definitions, images, and search function on your site.

Example 6

The Glossary widget excels in offering instant, on-page definitions for specialized terms. This core feature enhances user comprehension by providing immediate explanations, keeping visitors engaged without disrupting their browsing experience. It's an invaluable tool for sites with technical or niche content, effortlessly bridging the gap between expert terminology and reader understanding.

Direct Term Clarification with the Glossary Widget

The Glossary widget is equipped with right-to-left (RTL) text support, catering to languages that flow from right to left. This feature ensures that the widget is accessible and user-friendly for a diverse range of global audiences, enhancing the inclusivity and functionality of your website.

Right-to-Left Support in the Glossary Widget

The Glossary widget incorporates an alphabetical filter, allowing users to efficiently sort and view terms by selecting a specific letter. This feature streamlines the search process, making it easier for visitors to navigate and locate the exact term they're interested in within your glossary.

Alphabetical Filtering in the Glossary Widget

The Glossary widget includes a language selection option for its alphabetical filtering feature. You can choose the glossary language, ensuring the alphabetical sorting aligns with the linguistic characteristics of their selected language, enhancing usability and accessibility for a global audience.

Multilingual Alphabetical Filtering 

The Glossary widget offers a range of layouts to perfectly match your website's design. Choose the ideal layout that complements both the aesthetic and functional aspects of your site, ensuring your glossary not only informs but also visually integrates with your page.

Variety of Glossary Layouts

With a selection of elegant design skins, the Glossary widget adapts seamlessly to your brand style. Whether your website sports a modern or traditional look, you'll find a skin that enhances its visual appeal, simplifying the customization process.

Multiple Design Skins for the Glossary Widget

The Glossary widget provides extensive customization options. Adjust colors, fonts, and spacing to suit your site's unique style, creating a tailored look that aligns perfectly with your website's theme.

Fully Customizable Glossary Experience

Designed to be fully responsive, the Glossary widget ensures a consistent and elegant display across all devices. This adaptability is crucial for maintaining a professional appearance and user-friendly experience in today's mobile-centric world.

Responsive Design of the Glossary Widget

This widget is crafted for ease of use, requiring no coding skills for customization. Its intuitive interface allows for quick and effortless adjustments, making it suitable for anyone to integrate and personalize, regardless of technical expertise.

User-Friendly Glossary Integration

For those who desire deeper customization, the Glossary widget supports custom CSS. This feature caters to developers and designers looking to inject a unique flair, providing further control over both the appearance and functionality of the widget.

Custom CSS Options for the Glossary Widget

Embedding the Glossary widget on your website is straightforward, involving a simple code insertion. The widget updates automatically with every modification you make, keeping your website up-to-date effortlessly.

Effortless Embedding of the Glossary Widget

This widget plays a pivotal role in simplifying complex terminologies for your website visitors. By providing clear, concise definitions, it aids in enhancing user comprehension, ensuring that your content is accessible and understandable to a broader audience.

Enhanced User Understanding with the Glossary Widget

Use the Glossary widget when your site uses specialized terms, acronyms, or jargon that newcomers may not understand. Centralizing definitions in an interactive glossary with search and optional images helps visitors learn the language of your domain without leaving the site. This is essential for technical products, medical content, finance, education, and niche communities. Clear terminology lowers the barrier to entry and reduces confusion in the rest of your content. Over time, a good glossary becomes a reference that gives your brand authority and improves the experience for both new and returning users who need quick reminders.

Discover the best extensions for OpenCart

Some of the best Common Ninja extensions for OpenCart

Progress Circles

Business Listings

Image Slider

Animated Number Counter

Age Gate

Glossary

Social Media Links

Appointment Booking

Donation Button

Social Proof

Countdown to Download

Mega Footer

Common Ninja Search Engine