Open In App

Onsen UI CSS Component Material 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 Material 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 material progress circle is of navy blue color and has more thickness compared to the basic progress circle.

 Onsen UI CSS Component Material Progress Circle Classes:

  • progress-circular: This class is assigned to the SVG element to denote it as a progress circle.
  • progress-circular–material: The progress circle element with this class is of material type.
  • progress-circular__background: Background for the progress circle.
  • progress-circular–material__background: The background of the progress circle is of material type.
  • 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–material__primary: The primary progress circle of material type.
  • 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.
  • progress-circular–material__secondary: The secondary progress circle of material type.

Syntax: Create a material progress circle using Onsen UI.

<svg class="progress-circular progress-circular--material 
    progress-circular--indeterminate">
    <circle    class="progress-circular__background 
        progress-circular--material__background"/>
    <circle    class="progress-circular__primary 
        progress-circular--material__primary 
           progress-circular--indeterminate__primary"/>
    <circle    class="progress-circular__secondary 
        progress-circular--material__secondary 
        progress-circular--indeterminate__secondary"/>
</svg>

Example 1: In this example, we have an indefinite material 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 src=
    </script>
    <script src=
    </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 Material Progress Circle
        </strong>
        <br/>
        <br/>
        <svg class="progress-circular 
                    progress-circular--material 
                    progress-circular--indeterminate">
            <circle class="progress-circular__background 
                       progress-circular--material__background"/>
            <circle class="progress-circular__primary 
                         progress-circular--material__primary 
                         progress-circular--indeterminate__primary"/>
            <circle class="progress-circular__secondary 
                          progress-circular--material__secondary 
                          progress-circular--indeterminate__secondary"/>
        </svg>
    </center>
</body>
</html>


Output:

 

Example 2: In this example, we have the range slider with which we will set the rotation value of the material 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 Material Progress Circle
        </strong>
        <br /><br />
  
        <svg class="progress-circular progress-circular--material">
            <circle class="progress-circular__background 
                progress-circular--material__background" />
            <circle class="progress-circular__primary 
                progress-circular--material__primary" 
                style="stroke-dasharray: 80%, 251.32%;" />
        </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
            let cval = 250 - val
            $('circle').css('stroke-dasharray', `${val}%, ${cval}%`)
        })
    </script>
</body>
  
</html>


Output:

 

Reference link: https://onsen.io/v2/api/css.html#progress-circle-category



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