<!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>