Blaze UI Counter Attributes

Last Updated : 26 Apr, 2022

Blaze UI is an open-source user interface library that comes with a lot of components that help in reducing the development time of the website. All the components of Blaze UI are mobile-first and work well on devices of all screen sizes. All the features of Blaze UI rely on native browser features rather than a library or a framework which makes it easy to use.

In this article, we will be seeing Blaze UI Counter attributes. The counter component is used to display a timer or a countdown to the user. It can also be used to animate a number. The counter component has six attributes which are listed below.

Blaze UI Counter Attributes:

auto-start: This is a boolean attribute that defines whether the counter will start automatically on the page load or not.
start-value: This attribute accepts a number type value which is the start value of the counter.
end-value: This attribute accepts a number type value which is the start value of the counter.
duration: This attribute accepts a number type value which is the number of seconds the counter will take to go from the start value to the end value.
delay: This attribute also accepts number type value which is the number of milliseconds the counter will wait before starting.
decimals: This attribute accepts a number type value which is the number of digits to show after the decimal.

Syntax:

<blaze-counter
  class="u-super"
  auto-start
  start-value="0"
  end-value="20"
  duration="20"
  decimals="2"
  delay="1000">
</blaze-counter>

Example 1: This example shows the use of counter attributes to show a counter which goes from 0 to 100 in 5 seconds.

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"> 
    <title>Blaze UI - Counter Attributes</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
   </script> 
  
    <style> 
        body { 
            font-family: sans-serif; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <h2 style="color: green;">GeeksforGeeks</h2> 
        <h3>Counter Attributes - Blaze UI</h3> 
    </div> 
  
    <div class="u-window-box-super"> 
        <blaze-counter 
            class="u-super" 
            auto-start  
            start-value="0" 
            end-value="100" 
            duration="5" 
            decimals="2" 
            delay="1000"> 
        </blaze-counter> 
    </div> 
  
</body> 
  
</html>

Output:

Example 2: This example shows a reverse counter going from 500 to 0 in 7 seconds.

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"> 
    <title>Blaze UI - Counter Attributes</title> 
    <link rel="stylesheet" href= 
 "https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <script type="module" src= 
 "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
  
    <style> 
        body { 
            font-family: sans-serif; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <h2 style="color: green;">GeeksforGeeks</h2> 
        <h3>Counter Attributes - Blaze UI</h3> 
    </div> 
  
    <div class="u-window-box-super"> 
        <blaze-counter 
            class="u-super" 
            auto-start  
            start-value="500" 
            end-value="0" 
            duration="7" 
            decimals="2" 
            delay="1000"> 
        </blaze-counter> 
    </div> 
</body> 
</html>