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, aprenderemos cómo incluir un círculo de progreso utilizando la interfaz de usuario de Onsen.
Los componentes CSS del círculo de progreso de la interfaz de usuario de Onsen se utilizan para realizar un seguimiento del progreso de la carga de una página, la descarga, la 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.
Sintaxis:
<element-name class="class-name">...</element-name>
Componentes presentes en el círculo de progreso:
Círculo de progreso: este componente se usa para crear una barra de progreso simple usando las siguientes clases.
- Progress-circular: esta clase se asigna al elemento SVG para indicarlo como un círculo de progreso.
- progress-circular__background: esta clase se utiliza como fondo para el círculo de progreso.
- Progress-circular–indeterminate: esta clase se utiliza 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–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.
Círculo de progreso de material: este componente se usa para crear una barra de progreso simple de tipo material usando las siguientes clases:
- progress-circular–material: El elemento de círculo de progreso con esta clase es de tipo material.
- progress-circular–material__background: El fondo del círculo de progreso es de tipo material.
- progress-circular–material__primary: El círculo de progreso principal del tipo de material.
- progreso-circular–material__secundario: El círculo de progreso secundario de tipo material.
Ejemplo 1: en el siguiente código, haremos uso de las clases anteriores para demostrar el uso del círculo de progreso.
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>
Producción:
Ejemplo 2: En el siguiente código, haremos uso de las clases anteriores para demostrar el uso del círculo de progreso.
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>
Producción:
Referencia: https://onsen.io/v2/api/css.html#progress-circle-category