Blaze UI Counter

Last Updated : 13 Jun, 2022

Blaze UI is a framework-free open source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has excellent different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.

Blaze UI provides us with the feature to add a counter to the website, basically, the counter is a variable used to indicate counts or a numerical figure connected to any data, and it can be incremental or decremental. When we want to display a number with a bit more flair than usual, then we use Blaze UI Counter.

Blaze UI Counter Attributes: Counter attributes are used to define the behavior of the counter. The counter component has six attributes.
Blaze UI Counter Methods: Counter methods are used to trigger the functionality of counter
Blaze UI Counter Events: Counter events are useful, there is only one counter-event.
Blaze UI Counter Tag: The counter tag is used to add the Blaze UI counter.

Syntax:

<blaze-counter
    auto-start
    start-value="..."
    end-value="..."
    duration="..."
    decimals="..."
    delay="...">
</blaze-counter>

Example 1: The following code demonstrates the Blaze UI Counter using the Blaze UI counter tag.

HTML

<!DOCTYPE html>
<html>
<head>   
     <script type="module"
             src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule=""
            src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <link rel="stylesheet"
          href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>Blaze UI Incremental Counter</h2>
    <blaze-counter
        auto-start
        start-value="0"
        end-value="100"
        duration="7"
        decimals="1"
        delay="1500">
    </blaze-counter>
</body>
</html>

Output:

0-100 counter

Example 2: The following code demonstrates the Blaze UI decremental counter using the Blaze UI counter tag.

HTML

<!DOCTYPE html>
<html>
<head>   
     <script type="module"
             src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule=""
            src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <link rel="stylesheet"
          href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
   <style>
      .Logo {
          color: green;
      }
   </style>
</head>
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>Blaze UI Decremental Counter</h2>
    <blaze-counter
        auto-start
        start-value="100"
        end-value="0"
        duration="7"
        decimals="1"
        delay="1500">
    </blaze-counter>
</body>
</html>