Blaze UI Counter Events

Last Updated : 25 Apr, 2022

Blaze UI is an open-source lightweight CSS UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive.

Blaze UI Counter is used to display a number that acts as a counter. We can set it to a countdown counter or a stopwatch according to our needs. We can add delay, start and end values, stop, start, update and reset.

Syntax: Create a counter as follows:

<blaze-counter
  class="u-super u-text--mono"
  auto-start
  start-value=val
  end-value=val
  delay=num
  duration="5"
  id="counter"
></blaze-counter>

Blaze UI Counter Events:

auto-start: This field takes a boolean type of value and asks if the timer should start automatically or not.
start-value: This field asks for the value from which to start the counter.
end-value: This field asks for the value where the counter will end.
duration: This field asks for the duration in seconds the counter is going to last.
delay: This field asks for the duration in milliseconds the counter is going to start.
decimals: This field asks for the number of decimal places to show when the counter starts.
completed: This callback is called when the end value is reached.

Example 1: In the following example, we have a counter that ends on 0.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
    <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> 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
</head> 
  
<body> 
    <div class="o-container" style="padding: 1em;"> 
        <center> 
            <h1 style="color: green;"> 
                    GeeksforGeeks 
                </h1> 
              
            <strong>Blaze UI Counter Events</strong> 
            <br /> 
            <br /> 
            <p>Welcome to GeeksforGeeks</p> 
  
            <blaze-counter class="u-super u-text--mono" 
                auto-start start-value="9" end-value="100000" 
                duration="5" id="counter"> 
                <span slot="prefix">$</span> 
            </blaze-counter> 
        </center> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In the following example, we have a delay in our counter.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
    <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> 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
</head> 
  
<body> 
    <div class="o-container" style="padding: 1em;"> 
        <center> 
            <h1 style="color: green;"> 
                GeeksforGeeks 
            </h1> 
              
            <strong>Blaze UI Counter Events</strong> 
            <br /> 
            <br /> 
  
            <blaze-counter class="u-super u-text--mono" 
                auto-start start-value="0" end-value="100"
                delay="2000" duration="8" id="counter"> 
                <span slot="suffix">​ Likes</span> 
            </blaze-counter> 
        </center> 
    </div> 
</body> 
  
</html>