A4p Counter & Statistics Pro Demo
Notice: to use this extensions and addons, you need a YOOtheme Pro subscription, which is not included in our package.
Demo 1
Used: Classic Counter · Card Default · Integer format. A clean animated counter baseline with a simple title and supporting text.
Used: Counter · Progress Circle · Success color. The animated number is combined with an independent circular progress indicator.
Used: Counter · Progress Circle · Custom colors · Rounded caps. Custom HEX colors demonstrate how the progress circle can match a brand palette.
Used: Counter · Top Icon · Thousand separator. A classic KPI counter with a YOOtheme icon placed above the number.
Used: Counter · Icon Behind Content · Reduced opacity. A large low-opacity icon sits behind the statistic without replacing the readable foreground content.
PopularUsed: Counter · Image · Badge · Rounded image. An image-based statistic with a top-left badge demonstrates the Grid-style media options.
New
FeaturedUsed: Counter · Image · Link Button · Badge. This variation adds the native Grid-style link workflow to a counter with image and badge.
Used: Progress Bar · 68% · Percentage shown right. A straightforward animated progress bar with the percentage displayed beside the track.
Used: Progress Bar · Rounded · Percentage inside. A thicker rounded progress bar places the animated percentage directly inside the bar.
Used: Progress Bar · Icon · Percentage above. The progress bar is combined with a status icon and an above-right percentage label.
Used: Progress Bar · Smart Goal · Current / Target summary · Currency. Smart Goal calculates progress automatically from the current revenue and the target value.
Used: Progress Bar · Conditional Styling · Progress-based thresholds. Conditional Styling automatically colors the bar according to the configured low, medium and high ranges.
Used: Progress Bar · Smart Goal · Conditional Styling · Remaining summary. The current amount drives the progress automatically while status colors react to the calculated goal percentage.
Used: Background Progress · Left to Right · Card Primary. The entire panel background fills horizontally from left to right instead of using a separate bar.
Used: Background Progress · Right to Left. This background-progress variation demonstrates the reverse horizontal fill direction.
Used: Background Progress · Bottom to Top · Icon. The animated panel fill rises vertically from the bottom while an icon reinforces the KPI.
Used: Background Progress · Top to Bottom · Conditional Styling. Conditional colors are applied to the background progress based on the current progress percentage.
Used: Background Progress · Smart Goal · Comparison / Trend · Compact format. Smart Goal, a previous-period comparison and compact number formatting are combined in one KPI card.
Used: Progress Frame · Custom Square · Rounded corners. A square SVG Progress Frame surrounds the complete statistic and animates to the configured progress value.
Used: Progress Frame · Wide Rectangle · Sharp corners · Counter-clockwise. A wide rectangular frame with zero corner radius demonstrates a technical, dashboard-style appearance.
Used: Progress Frame · Full Item / Panel · Top-left start. The frame follows the complete panel dimensions instead of using a fixed custom width and height.
Used: Progress Frame · Full Item / Panel · Counter-clockwise · Frame percentage. The progress value is displayed directly at the animated frame while the frame runs counter-clockwise.
Used: Progress Frame · Smart Goal · Target summary. The frame progress is calculated automatically from completed certifications versus the planned target.
Used: Progress Frame · Conditional Styling · Lower is better. A lower value is considered better, so Conditional Styling reverses the normal success logic for the frame.
Used: Counter · Decimal format · Two decimal places. Decimal formatting keeps the animation smooth while displaying a precise non-integer KPI.
Used: Counter · Currency format · Comparison / Trend. Currency formatting is combined with an automatically calculated percentage change versus the previous month.
Used: Counter · Percentage format · Smart Goal · Lower is better · Comparison. This KPI demonstrates inverse goal logic: a lower defect rate is better and a downward trend is positive.
Used: Counter · Compact Number · Icon · Conditional Styling · Link. A compact 1.3M-style value combines an icon, status-driven colors and a Grid-style call-to-action link.
Demo 2
Used: Counter · Progress Circle · Smart Goal · Current / Target summary
Smart Goal automatically calculates the circular progress from the current value and target value.
Used: Counter · Progress Circle · Smart Goal · Lower is better · Decimal format
A lower response time is the goal. The circle is calculated automatically while the counter keeps a decimal value.
Used: Counter · Progress Circle · Conditional Styling · Lower is better
Conditional Styling evaluates the actual incident count and colors both number and circle automatically.
Used: Counter · Comparison / Trend · Absolute change · Icon
The current value is compared with yesterday and the absolute improvement is shown with a trend arrow.
Used: Counter · German Compact Number · Icon
A large technical value is shortened using German compact notation for a dashboard-friendly KPI.
Used: Counter · Currency · Smart Goal · Target summary
The current budget is formatted as currency and measured automatically against a quarterly target.
Used: Counter · Percentage · Conditional Styling · Number + Panel
Status colors are applied to the percentage and panel background for an immediately visible result.
PopularUsed: Counter · Image · Badge · Compact Number · Link
Image, badge, compact formatting and the Grid-style link workflow are combined in one promotional KPI card.
TrendingUsed: Progress Bar · Thin bar · Percentage above
A minimal thin progress bar keeps the focus on the percentage and suits onboarding or documentation status.
Used: Progress Bar · Thick rounded bar · Percentage inside · Icon
A bold rounded progress bar places the percentage inside and adds a status icon above.
Used: Progress Bar · Smart Goal · Lower is better · Remaining summary
Smart Goal treats a lower backlog as better and calculates progress automatically from current and target values.
Used: Progress Bar · Conditional Styling · Current-value thresholds · Icon
Conditional Styling evaluates the security score and colors progress and icon according to defined thresholds.
Used: Progress Bar · Currency · Smart Goal · Current / Target summary
Current and target currency values drive the progress bar automatically for budget and fundraising use cases.
Used: Progress Bar · Comparison / Trend · Absolute change
A regular progress bar is enriched with an automatically calculated absolute order trend.
Used: Background Progress · Top to Bottom · Icon Behind Content
The complete card fills vertically from the top while a low-opacity icon sits behind the content.
Used: Background Progress · Bottom to Top · Smart Goal · Lower is better · Decimal
A vertical background fill visualizes a lower-is-better time goal while the displayed value remains decimal.
Used: Background Progress · Conditional Styling · Panel + Number · Percentage
Conditional Styling applies the status color to the animated background and the percentage number.
Used: Background Progress · Compact Number · Comparison / Trend · Right to Left
A reverse background fill combines a compact traffic number with an automatically calculated monthly trend.
DemoUsed: Background Progress · Image · Badge · Link · Bottom to Top
A product image, badge and call-to-action are combined with a vertical background-progress visualization.
Used: Progress Frame · Tall Rectangle · Bottom-center start · Clockwise
A portrait-style custom frame demonstrates that Progress Frame works beyond square and landscape layouts.
Used: Progress Frame · Full Item / Panel · Primary Card · Frame percentage
The frame follows the complete card area and displays its progress value separately at the top right.
Used: Progress Frame · Square · Bottom-center start · Counter-clockwise
A square frame starts at the bottom and runs counter-clockwise to demonstrate another path combination.
Used: Progress Frame · Wide Rectangle · Top-right start · Counter-clockwise · Icon
A wide frame with a top-right start point and reverse direction surrounds an icon-based KPI.
Used: Progress Frame · Sharp corners · Bottom-right percentage
A zero-radius frame creates a technical rectangular look while the progress value sits at the lower right.
Used: Progress Frame · Smart Goal · Currency · Current / Target summary
The frame progress is calculated from revenue values while both counter and summary use currency formatting.
Headline h1
Used: Progress Frame · Conditional Styling · Lower is better · Current-value thresholds
A lower error rate is considered better. Conditional Styling colors both frame and number automatically.
Used: Progress Frame · Decimal Currency · Comparison / Trend
A framed currency KPI compares the current average order value with the previous period and colorizes the trend.
Used: Progress Frame · Smart Goal · Conditional Styling · Comparison · Compact Number · Icon · Link
A maximum-feature showcase combines automatic goal progress, status colors, trend calculation, compact formatting, icon and CTA.