TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Widget de gráfico circular de progreso animado para Weebly

0

Las barras de progreso se utilizan para mostrar habilidades y otros datos en una vista pictórica para que los usuarios puedan comprender los datos rápidamente. En nuestro artículo anterior, vimos cómo crear barras de progreso horizontales y en este tutorial veamos la forma de crear un widget de gráfico circular de progreso animado para el sitio Weebly. De las muchas opciones disponibles, el complemento de gráfico circular fácil es una de las formas sencillas de crear gráficos de progreso circular. El widget se verá más abajo y puede personalizar los colores y el contenido según sus necesidades.

Widget de gráfico circular de progreso animado para Weebly

Descargue los archivos de origen para crear este widget en su sitio.

El widget se crea modificando el complemento gratuito de gráfico circular jQuery easy y agregando un script personalizado y CSS. Tiene las siguientes características:

  • Totalmente receptivo en todos los dispositivos.
  • Especifique cualquier porcentaje para el progreso, si no desea que el símbolo% lo elimine del archivo de secuencia de comandos.
  • Personaliza los colores del círculo, la animación de progreso y los picos.
  • Coloque el gráfico en cualquier lugar, el widget se animará en el desplazamiento.

Descargue los archivos fuente y siga las instrucciones paso a paso a continuación para agregar el widget a su sitio Weebly. La descarga zip contiene los siguientes archivos:

  • jquery.min.js: este es un archivo jQuery que solo se requiere para que funcione la demostración. Dado que Weebly usa la biblioteca jQuery de forma predeterminada, este archivo no es necesario en su sitio de Weebly.
  • jquery.easypiechart.min.js: este es el archivo de secuencia de comandos base y la secuencia de comandos personalizada también se agrega dentro de este archivo para que sea una fuente única.
  • Progress Pie Chart.html: esta es una página HTML de demostración que contiene el código CSS y HTML.

Agregar el widget en Weebly

Primero cargue el archivo jquery.easypiechart.min.js a su sitio Weebly en "Tema> Editar HTML / CSS > Activos". Vincule el script a la página requerida en "Páginas> Seleccione la página> Avanzado> Código de encabezado " agregando el debajo del código:

<script src="files/theme/jquery.easypiechart.min.js"></script>

El CSS contiene tres componentes principales: contenedor, bloques circulares individuales y el gráfico controlado a través de las clases .chart-container, .pr-chart-ctrl y .pr-chart respectivamente.

Agregue el siguiente CSS (disponible con Progress Pie Chart.html) en la sección "Páginas> Seleccione la página> Configuración de SEO> Código de pie de página".

<style> .chart-container .pr-chart-ctrl { display:block; float:left; width:25%; } .chart-container .pr-chart-ctrl .pr-chart { display:block; position:relative; width:100%; margin:0 0 20px 0; text-align:center; margin-top: 30px; } .chart-container .pr-chart-ctrl .pr-chart canvas { display:block; margin:0 auto; padding:0; vertical-align:center; } .chart-container .pr-chart-ctrl .pr-chart i { position:absolute; top:0; left:0; width:100%; height:200px; line-height:200px; font-size:48px; font-style:normal; color: #808080; } .chart-container .pr-chart-ctrl p{ margin:0; padding:0; text-transform:uppercase; color:green; } @media screen and (max-width:500px) { .chart-container .pr-chart-ctrl { width:100%; margin-bottom:50px; } } @media screen and (min-width:501px) and (max-width:900px) { .chart-container .pr-chart-ctrl { width:50%; margin-bottom:50px; } } </style>

La parte final es agregar el siguiente HTML dentro de un elemento de " Código incrustado ". Puede reemplazar los porcentajes ficticios y los títulos por los suyos.

<ul class="chart-container"> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="25"><i></i></div> <p>WordPress Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="50"><i></i></div> <p>Weebly Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="75"><i></i></div> <p>Search Engine Optimization</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="100"><i></i></div> <p>Blog Consulting</p> </li> </ul>

Personalización del widget

El archivo jquery.easypiechart.min.js contiene el siguiente script para controlar el comportamiento de la animación de progreso circular.

size: 200, barColor: '#F85656', trackColor: '#f1f1f1', scaleColor: 'violet', scaleLength: 5, lineWidth: 5, lineCap: 'square', onStep: function(from, to, percent) { $(this.el).find('i').text(Math.round(percent) + '%');

Puede eliminar el% para eliminarlo de la pantalla del gráfico y el control de las variables restantes es el siguiente:

Variable

Control

Talla Defina el tamaño del círculo del gráfico circular.
barColor Color de la animación de progreso.
trackColor Color del círculo circular.
scaleColor Color de las espigas.
longitud de la escala Longitud de las púas.
ancho de línea Ancho del círculo del gráfico circular de progreso.
lineCap Fin de la animación de progreso, los valores posibles son round, square y butt.

Gráfico circular de paralaje de ancho completo

Agregar el widget anterior usando el elemento de código incrustado hará que parezca sencillo. Puede hacer un hermoso gráfico circular de paralaje utilizando el elemento de sección como se muestra a continuación:

Widget de gráfico circular de progreso animado para Weebly

Gráfico circular Weebly Parallax

Siga las instrucciones a continuación para crear un gráfico circular con un fondo de imagen de paralaje.

  • Arrastre y suelte un elemento de sección. Haga clic en el elemento de la sección en el área de contenido y luego haga clic en la opción "Editar fondo".
  • Elija la imagen como fondo y configure el efecto de desplazamiento como paralaje. También puede establecer el color de fondo y el fondo del video solo está disponible para usuarios profesionales.
  • Ahora arrastre y suelte un elemento de código de inserción y agregue el código HTML como se proporciona en la sección anterior.
  • Publique su sitio y vea el gráfico circular animado con fondo de imagen de paralaje.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More