Onsen UI Progress Circle CSS Components
Last Updated :
17 Jul, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- CDN links of Onsen UI library -->
<link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js">
</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.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- CDN links of Onsen UI library -->
<link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src=
"https://unpkg.com/onsenui/js/onsenui.min.js">
</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
Similar Reads
Onsen UI Progress Bar CSS Components Onsen UI is an HTML5 framework that allows you to design distinctive and usable user interfaces for free (UI). It also makes UI creation easier, enabling programmers to focus on the core of the product. Onsen UI is a complex set of user interface components designed specifically for mobile apps, wit
2 min read
Onsen UI CSS Component Material Progress Circle 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 us
3 min read
Onsen UI CSS Component Basic Progress Bar The Onsen UI Progress Bar is used to create a basic progress bar on a web page. It can be used to create an animated infinite looping progress bar that shows that an operation is in progress. If a percent is given, then it would display the amount of work that has been completed. This is done using
2 min read
Onsen UI CSS Component Material Progress Bar Onsen UI is a free open-source HTML5 framework that allows you to create unique and usable user interfaces (UI). It also simplifies UI development, allowing programmers to concentrate on the program's functionality. Onsen UI is a sophisticated set of user interface components created exclusively for
3 min read
ReactJS Onsen UI ProgressBar Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. ProgressBar components provide a way to show the progress of any tasks/activity to the user in the form of the progress ba
2 min read
ReactJS Onsen UI ProgressCircular Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. ProgressCircular components are used to display a circular progress indicator. We can use the following approach in ReactJ
2 min read
ReactJS UI Ant Design Progress Component Ant Design Library has this component pre-built, and it is very easy to integrate as well. Progress Component is used to display the current progress of an operation flow. We can use the following approach in ReactJS to use the Ant Design Progress Component. Progress Props: format: It is used as the
3 min read
Angular PrimeNG ProgressBar Component Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the progressBar component in Angular PrimeNG. We will also
3 min read
Foundation CSS Progress Bar Color Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
2 min read
Angular PrimeNG ProgressSpinner Component Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the ProgressSpinner component in Angular PrimeNG. We will a
3 min read