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 =
< script type = "module" src =
</ 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 =
< script type = "module" src =
</ 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 >
|
Output:
Reference: https://www.blazeui.com/components/counter/
Share your thoughts in the comments
Please Login to comment...