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