Círculo de progreso del material del componente CSS de la interfaz de usuario de Onsen

Onsen UI CSS se utiliza para crear hermosos componentes HTML . Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio.

En este artículo, vamos a implementar el círculo de progreso material del componente CSS de la interfaz de usuario de Onsen . El círculo de progreso se utiliza para realizar un seguimiento del progreso de carga de una página, descarga, carga, etc. El círculo de progreso es un icono SVG que contiene elementos circulares. El círculo de progreso material es de color azul marino y tiene más grosor en comparación con el círculo de progreso básico.

 Onsen UI CSS Component Material Clases de círculo de progreso:

  • Progress-circular: esta clase se asigna al elemento SVG para indicarlo como un círculo de progreso.
  • progress-circular–material: El elemento de círculo de progreso con esta clase es de tipo material.
  • progress-circular__background: Fondo para el círculo de progreso.
  • progress-circular–material__background: El fondo del círculo de progreso es de tipo material.
  • progreso-circular-indeterminado: Para hacer que el círculo de progreso continúe indefinidamente.
  • progress-circular__primary: El elemento circular con esta clase tiene un color más profundo que se carga.
  • progress-circular–material__primary: El círculo de progreso principal del tipo de material.
  • progress-circular–indeterminate__primary: El elemento del círculo principal que contiene esta clase tiene un color más profundo que gira indefinidamente.
  • progreso-circular__secundario: El elemento circular con esta clase tiene un color más claro que se carga.
  • progress-circular–indeterminate__secondary: El elemento del círculo secundario que contiene esta clase tiene un color más claro que gira indefinidamente.
  • progreso-circular–material__secundario: El círculo de progreso secundario de tipo material.

Sintaxis: Cree un círculo de progreso material utilizando la interfaz de usuario de Onsen.

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

Ejemplo 1: En este ejemplo, tenemos un círculo de progreso material indefinido.

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=
          "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>
    <script src=
          "https://code.jquery.com/jquery-3.6.0.min.js">
    </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>

Producción:

 

Ejemplo 2: en este ejemplo, tenemos el control deslizante de rango con el que estableceremos el valor de rotación del círculo de progreso del material.

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=
        "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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">
    </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>

Producción:

 

Enlace de referencia: https://onsen.io/v2/api/css.html#progress-circle-category

Publicación traducida automáticamente

Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *