Blaze UI Counter Attributes
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;" >w3wiki</ 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;" >w3wiki</ 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 > |
Output:
Reference: https://www.blazeui.com/components/counter/
Contact Us