Onsen UI es un marco HTML5 que le permite diseñar interfaces de usuario distintivas y utilizables de forma gratuita (UI). También facilita la creación de la interfaz de usuario, lo que permite a los programadores centrarse en el núcleo del producto. Onsen UI es un conjunto complejo de componentes de interfaz de usuario diseñados específicamente para aplicaciones móviles, con funciones listas para usar que siguen los estándares de diseño nativos de iOS y Android. La interfaz de usuario de Onsen se creó con AngularJS en mente, pero también se puede usar con jQuery o cualquier otro marco. La interfaz de usuario de Onsen es un marco JavaScript de PhoneGap y Cordova.
La barra de progreso de la interfaz de usuario de Onsen se utiliza para crear una barra de progreso básica en una página web. Se puede usar para crear una barra de progreso de bucle infinito animada que muestra que una operación está en progreso
Componentes CSS de la barra de progreso de la interfaz de usuario de Onsen:
- Barra de progreso básica: este componente contiene las diversas clases que se pueden usar para crear la barra de progreso simple y básica.
- Barra de progreso de material: este componente contiene las clases que se pueden usar para crear la barra de progreso de material.
Sintaxis:
<element-name class="Progress-Bar-Component-Class">
...
</element-name>
Ejemplo 1: En el siguiente ejemplo, utilizaremos la clase Progress Bar Basic para crear una barra 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 Bar CSS Components </h3> <div class="progress-bar"> <div class="progress-bar__primary" style="width: 30%"> </div> </div> <br /> <div class="progress-bar"> <div class="progress-bar__primary" style="width:20%"> </div> <div class="progress-bar__secondary" style="width:76%"> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, utilizaremos la clase Material Progress Bar para crear una barra 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 Bar CSS Components </h3> <br> <div class="progress-bar"> <div class="progress-bar progress-bar--indeterminate"></div> </div> <br> <div class="progress-bar progress-bar--material"> <div class="progress-bar__secondary" style="width:78%;"> </div> </div> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#progress-bar-category