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 will learn how to include a progress circle using Onsen UI.
The Onsen UI progress circle CSS components are 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.
Syntax:
<element-name class="class-name">...</element-name>
Components present in progress circle:
Progress Circle: This component is used to create a simple progress bar using the following classes.
- progress-circular: This class is assigned to the SVG element to denote it as a progress circle.
- progress-circular__background: This class is used as background for the progress circle.
- progress-circular–indeterminate: This class is used 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.
Material Progress Circle: This component is used to create a simple progress bar of material type using the following classes:
- progress-circular–material: The progress circle element with this class is of material type.
- progress-circular–material__background: The background of the progress circle is of material type.
- progress-circular–material__primary: The primary progress circle of material type.
- progress-circular–material__secondary: The secondary progress circle of material type.
Example 1: In the below code, we will make use of the above classes to demonstrate the use of the progress circle.
<!DOCTYPE html> <html>
<head>
<!-- CDN links of Onsen UI library -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Onsen UI Progress Circle CSS Components</h3>
<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 below code, we will make use of the above classes to demonstrate the use of the progress circle.
<!DOCTYPE html> <html>
<head>
<!-- CDN links of Onsen UI library -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Onsen UI Progress Circle CSS Components</h3>
<svg class="progress-circular">
<circle class="progress-circular__background"/>
<circle class="progress-circular__secondary" style="stroke-dasharray: 140%, 251.32%"/>
<circle class="progress-circular__primary" style="stroke-dasharray: 100%, 251.32%"/>
</svg>
</center>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#progress-circle-category