Open In App

Onsen UI CSS Component Basic Progress Circle

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

HTML




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

HTML




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



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