Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop.
In this article, we are going to implement the Onsen UI CSS Component Material Progress Circle. The progress circle is used to track the progress of loading a page, downloading, uploading, etc. The progress circle is an SVG icon containing circle elements. The material progress circle is of navy blue color and has more thickness compared to the basic progress circle.
Onsen UI CSS Component Material Progress Circle Classes:
- progress-circular: This class is assigned to the SVG element to denote it as a progress circle.
- progress-circular–material: The progress circle element with this class is of material type.
- progress-circular__background: Background for the progress circle.
- progress-circular–material__background: The background of the progress circle is of material type.
- progress-circular–indeterminate: To make the progress circle go on indefinitely.
- progress-circular__primary: The circle element with this class has a deeper color which loads.
- progress-circular–material__primary: The primary progress circle of material type.
- progress-circular–indeterminate__primary: The primary circle element containing this class has a deeper color that rotates indefinitely.
- progress-circular__secondary: The circle element with this class has a lighter color which loads.
- progress-circular–indeterminate__secondary: The secondary circle element containing this class has a lighter color that rotates indefinitely.
- progress-circular–material__secondary: The secondary progress circle of material type.
Syntax: Create a material progress circle using Onsen UI.
<svg class="progress-circular progress-circular--material
progress-circular--indeterminate">
<circle class="progress-circular__background
progress-circular--material__background"/>
<circle class="progress-circular__primary
progress-circular--material__primary
progress-circular--indeterminate__primary"/>
<circle class="progress-circular__secondary
progress-circular--material__secondary
progress-circular--indeterminate__secondary"/>
</svg>Example 1: In this example, we have an indefinite material progress circle.
<!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" />
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
#heading {
color: green;
}
#title {
font-style: bold;
}
</style>
</head>
<body>
<center>
<h1 id="heading">GeeksforGeeks</h1>
<strong id="title">
Onsen UI CSS Component Material Progress Circle
</strong>
<br/>
<br/>
<svg class="progress-circular
progress-circular--material
progress-circular--indeterminate">
<circle class="progress-circular__background
progress-circular--material__background"/>
<circle class="progress-circular__primary
progress-circular--material__primary
progress-circular--indeterminate__primary"/>
<circle class="progress-circular__secondary
progress-circular--material__secondary
progress-circular--indeterminate__secondary"/>
</svg>
</center>
</body>
</html>
|
Output:
Example 2: In this example, we have the range slider with which we will set the rotation value of the material progress circle.
<!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" />
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</script>
</script>
<style>
#heading {
color: green;
}
#title {
font-style: bold;
}
</style>
</head>
<body>
<center>
<h1 id="heading">GeeksforGeeks</h1>
<strong id="title">
Onsen UI CSS Component Material Progress Circle
</strong>
<br /><br />
<svg class="progress-circular progress-circular--material">
<circle class="progress-circular__background
progress-circular--material__background" />
<circle class="progress-circular__primary
progress-circular--material__primary"
style="stroke-dasharray: 80%, 251.32%;" />
</svg>
<br /><br />
<input id="mrange" type="range" min="1" max="250" value="50" />
</center>
<script>
$('input[type=range]').on('input', function () {
let val = document.getElementById('mrange').value
let cval = 250 - val
$('circle').css('stroke-dasharray', `${val}%, ${cval}%`)
})
</script>
</body>
</html>
|
Output:
Reference link: https://onsen.io/v2/api/css.html#progress-circle-category