Blaze UI is a CSS open-source framework. It is a lightweight 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. Its project is available open-source so a large community maintains it.
Blaze UI Progress is used to show the progress of an event such as uploading or downloading a file. It is a customizable progress bar that can have different colors and can have different styles depending upon the attributes.
Blaze UI Progress Types:
- Simple: This is a simple progress bar. It can have different colors.
- Stacked: This progress bar can contain two or more progress bars inside it. The progress bar inside it is an individual progress bar and can contain different colors.
- Colors and Sizes: This progress bar can be colored and we can change the size of the bar also.
- Rounded: The progress bar can also have rounded corners. This is a progress bar whether simple or stacked, that can have rounded corners.
Blaze UI Progress Attributes:
- type: This sets the color of the progress bar.
- rounded: This sets the corners rounded if true.
- value: This takes the amount of progress done.
- min: It is the minimum value of the progress bar.
- max: It is the maximum value of the progress bar.
-
size: This sets the size of the progress bar: The different sizes are as follows:
- xsmall
- small
- medium
- large
- xlarge
- supers
-
color: The color of the progress bar can be changed. Here are the different colors:
- default
- c-progress__bar–brand
- c-progress__bar–info
- c-progress__bar–warning
- c-progress__bar–success
- c-progress__bar–error
Syntax:
<blaze-progress size="medium" rounded>
<blaze-progress-bar value="50" type="info">
50%
</blaze-progress-bar>
</blaze-progress>Example 1: In the following example, we have a progress bar in which we can change the value using the two buttons below it.
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> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Progress </strong>
<br> <br>
<blaze-progress size="medium" rounded>
<blaze-progress-bar value="50" type="info">
<span id="value"> 50% </span>
</blaze-progress-bar>
</blaze-progress>
<br>
<div style="justify-content: space-evenly;
display: flex;">
<button onclick="changeValue(10)" class="c-button c-button--success">
Add 10
</button>
<button onclick="changeValue(-10)" class="c-button c-button--error">
Subtract 10
</button>
</div>
</center>
</div>
<script>
const changeValue = (value) => {
let current = parseInt($('blaze-progress-bar').attr('value'))
$('blaze-progress-bar').attr('value', current + value)
$('#value').html(`${current + value}%`)
}
</script>
</body>
</html>
|
Output:
Blaze UI Progress
Example 2: In the following example, we will change the size of the progress bar using buttons.
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> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Progress </strong>
<br> <br>
<blaze-progress size="medium" rounded>
<blaze-progress-bar value="50" type="info">
<span id="value"> 50% </span>
</blaze-progress-bar>
</blaze-progress>
<br>
<div style="justify-content: space-evenly;
display: flex;">
<button onclick="changeValue(10)" class="c-button u-xsmall
c-button--success">
Add 10
</button>
<button onclick="changeValue(-10)" class="c-button u-xsmall
c-button--error">
Subtract 10
</button>
</div>
<br>
<div style="justify-content: space-evenly;
display: flex;">
<button onclick="changeSize('xsmall')" class="c-button u-xsmall
c-button--brand">
XSMALL
</button>
<button onclick="changeSize('small')" class="c-button u-xsmall
c-button--brand">
SMALL
</button>
<button onclick="changeSize('medium')" class="c-button u-xsmall
c-button--brand">
MEDIUM
</button>
<button onclick="changeSize('large')" class="c-button u-xsmall
c-button--brand">
LARGE
</button>
<button onclick="changeSize('xlarge')" class="c-button u-xsmall
c-button--brand">
XLARGE
</button>
<button onclick="changeSize('super')" class="c-button u-xsmall
c-button--brand">
SUPER
</button>
</div>
<br>
</center>
</div>
<script>
const changeValue = (value) => {
let current = parseInt($('blaze-progress-bar').attr('value'))
$('blaze-progress-bar').attr('value', current + value)
$('#value').html(`${current + value}%`)
}
const changeSize = (size) => {
$('blaze-progress').attr('size', size)
}
</script>
</body>
</html>
|
Output:
Blaze UI Progress
Example 3: In the following example, we have a stacked progress bar with a rounded corner. We can even toggle the rounded corner of the progress bar with the button.
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> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong>
Blaze UI Progress
</strong>
<br /> <br />
<button onclick="toggleRounded()" class="c-button">
Toggle Rounded
</button>
<br /> <br />
<blaze-progress size="100" rounded="true">
<blaze-progress-bar value="20">
20%
</blaze-progress-bar>
<blaze-progress-bar value="8" type="brand">
8%
</blaze-progress-bar>
<blaze-progress-bar value="30" type="info">
30%
</blaze-progress-bar>
<blaze-progress-bar value="12" type="warning">
12%
</blaze-progress-bar>
<blaze-progress-bar value="15" type="success">
15%
</blaze-progress-bar>
<blaze-progress-bar value="15" type="error">
15%
</blaze-progress-bar>
</blaze-progress>
</center>
</div>
<script>
const toggleRounded = () => {
let curr = $('blaze-progress').attr('rounded')
$('blaze-progress')
.attr('rounded', curr === 'true' ? 'false' : 'true')
}
</script>
</body>
</html>
|
Output:
Example 4: In the following example, we have a progress bar whose value we can shrink or increase as well as change the color of the progress bar.
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> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong>
Blaze UI Progress
</strong>
<br /> <br />
<blaze-progress size="medium" rounded>
<blaze-progress-bar value="50" type="info">
<span id="value"> 50% </span>
</blaze-progress-bar>
</blaze-progress>
<br />
<div style="justify-content: space-evenly; display: flex;">
<button onclick="changeValue(10)" class="c-button c-button--success">
Add 10
</button>
<button onclick="changeValue(-10)" class="c-button c-button--error">
Subtract 10
</button>
</div>
<br />
<div>
<button onclick="changeColour('')" class="c-button">
Default
</button>
<button onclick="changeColour('brand')" class="c-button c-button--brand">
Brand
</button>
<button onclick="changeColour('info')" class="c-button c-button--info">
Info
</button>
<button onclick="changeColour('warning')" class="c-button c-button--warning">
Warning
</button>
<button onclick="changeColour('success')" class="c-button c-button--success">
Success
</button>
<button onclick="changeColour('error')" class="c-button c-button--error">
Error
</button>
</div>
</center>
</div>
<script>
const changeValue = (value) => {
let current = parseInt($('blaze-progress-bar').attr('value'))
$('blaze-progress-bar').attr('value', current + value)
$('#value').html(`${current + value}%`)
}
const changeColour = (value) => {
$('blaze-progress-bar').attr('type', value)
}
</script>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/progress/