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 básico 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 básico de progreso es de color azul y tiene menor grosor.
Onsen UI CSS Component Clases de círculo de progreso básico:
- Progress-circular: esta clase se asigna al elemento SVG para indicarlo como un círculo de progreso.
- 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–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.
Sintaxis: Cree un círculo de progreso de la siguiente manera:
<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>
Ejemplo 1: En el siguiente ejemplo, tenemos un círculo de progreso 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 Basic Progress Circle
</strong>
<br />
<br />
<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 ejemplo, tenemos el control deslizante de rango con el que estableceremos el valor de rotación.
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 Basic Progress Circle
</strong>
<br />
<br />
<svg class="progress-circular">
<circle class="progress-circular__background" />
<circle class="progress-circular__primary"
style="stroke-dasharray: 200%;" />
</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
$('circle').css('stroke-dasharray', `${val}%`)
})
</script>
</body>
</html>
Producción:
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