Open In App

Onsen UI Progress Circle CSS Components

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <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.

HTML




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



Last Updated : 17 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads