Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

CountUp did not work


why count up on my code did not working properly, i have put plugins.bundle.js on my code

this this the part of my count up

<div class="fs-lg-2hx fs-2x fw-bold text-white d-flex flex-center">
<div class="min-w-70px counted"
data-kt-countup="true"
data-kt-countup-value="32"
data-kt-countup-suffix="+"
data-kt-initialized="1"
>
0
</div>
</div>

what's wrong with my code?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


Hi,

May I know which Metronic version are you using? Do you have any JS errors on the console? Does it work on the original template but does not work in your developing app ?

Regards.



Hi sir, i use version 8.23 and there is nothing errors on my console, yeah in original template like landing.html the countup is working properly



Hi,

If you have copied the code from the code inspector please remove data-kt-initialized="1" since it should be added dynamically by the Metronic code during global initialization of all count-up elements.

Please try to use the code from the original HTML template code or docs code examples. Do not copy and paste the code from the browser code inspector.

Regards.



Thanks sir, it's works now



Hi happy,

Glad to hear that. All the best with your project!

Regards.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(