January 16

Animated Counters Example

0  comments

With the short code options in this theme, you can add two types of counters to your content.

Number Counter
The first kind is a number counter:
[one_third_first][thrive_number_counter color=”dark” value=”2″ before=”349″ after=”Km” label=”Distance Travelled”][/one_third_first][one_third][thrive_number_counter color=”green” value=”” before=”5″ after=”” label=”Pizzas Consumed”][/one_third][one_third_last][thrive_number_counter color=”purple” value=”9″ before=”$251″ after=”” label=”Money Spend”][/one_third_last]

The number counters are available in 8 different colors and are highly customizable. You can add any custom unit before and/or after the number and can add a custom label to each counter.

Code Example:

Enter your text here...

Fill Counter
The fill counter is similar to a progress bar, but much more compact. You can use it to visualize an amount of almost anything or compare different amounts visually.

[one_third_first][thrive_fill_counter color=”red” value=”” before=”75″ after=”%” percentage=”75″ label=”Fill Counter”][/one_third_first][one_third][thrive_fill_counter color=”blue” value=”” before=”85″ after=”%” percentage=”85″ label=”Custom Text”][/one_third][one_third_last][thrive_fill_counter color=”green” value=”” before=”20″ after=”%” percentage=”20″ label=”Lorem Ipsum”][/one_third_last]

[one_third_first][thrive_fill_counter color=”purple” value=”” before=”39″ after=”%” percentage=”39″ label=”Dolor Sit Amet”][/one_third_first][one_third][thrive_fill_counter color=”dark” value=”” before=”42″ after=”%” percentage=”42″ label=”Adipiscin Elit”][/one_third][one_third_last][thrive_fill_counter color=”teal” value=”” before=”100″ after=”%” percentage=”100″ label=”Lorem Ipsum”][/one_third_last]

Code Example:

Enter your text here...


Tags


You may also like

TCB Custom HTML Element

TCB Credit Card Icons Example

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Subscribe to our newsletter now!