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 Basic 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 basic progress circle is of blue color and has lesser thickness.
Onsen UI CSS Component basic progress circle classes:
- progress-circular: This class is assigned to the SVG element to denote it as a progress circle.
- 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–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.
Syntax: Create a progress circle as follows:
<svg class="progress-circular progress-circular--indeterminate">
<circle class="progress-circular__background" />
<circle class="progress-circular__primary
progress-circular--indeterminate__primary" />
<circle class="progress-circular__secondary
progress-circular--indeterminate__secondary" />
</svg>Example 1: In the following example, we have an indefinite 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 Basic Progress Circle
</strong>
<br />
<br />
<svg class="progress-circular progress-circular--indeterminate">
<circle class="progress-circular__background" />
<circle class="progress-circular__primary
progress-circular--indeterminate__primary" />
<circle class="progress-circular__secondary
progress-circular--indeterminate__secondary" />
</svg>
</center>
</body>
</html>
|
Output:
Example 2: In the following example, we have the range slider with which we will set the rotation value.
<!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 Basic Progress Circle
</strong>
<br />
<br />
<svg class="progress-circular">
<circle class="progress-circular__background" />
<circle class="progress-circular__primary" style="stroke-dasharray: 200%;" />
</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
$('circle').css('stroke-dasharray', `${val}%`)
})
</script>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#progress-circle-category