Skip to main content
se añadieron 348 caracteres en el cuerpo
Origen Enlace
alo Malbarez
  • 9.7k
  • 3
  • 12
  • 29

Aparentemente no cargabas bien la librería: Sea por que no encuentra el archivo o no tenga permisos el servidor web envía un error en forma de página html, si no incluye las cabeceras de error el navegador carga ese html como si fuera el script ( de ahí que el warning sea que no coincide el tipo mime ). Como no puedo acccederacceder a tu sistema de directorios he cargado la librería a través de un CDN. También te faltaba añadirle un value: al objeto para que se lance el renderizado.

En el ejemplo que nos pones no cargabas tampocono cargabas tampoco la librería Jquery pero supongo que en tu proyecto si que lo hacías. Al fallar la libreríacarga del script del plugin, Jquery pero supongo que en tu proyecto si que lo hacíascircleProgress ya no es una función.

Aquí puedes ver el código funcionando:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.js"></script>


<div class="circulito" data-value="5"></div>


<script type="text/javascript">

    $('.circulito').circleProgress({
        size: 50,
        value: 0.75,
        startAngle: 11,
        lineCap: 'round',
        fill: {
            color: "#44aaf2"
        }
    }).on('circle-animation-progress', function (event, progress, stepValue) {
        $(this).find('strong').text(stepValue.toFixed(2));
        // $(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
    });
    

</script>

Anotación: He quitado el PHP de tu código para poder hacer que se reproduzca aquí.

Referencia: Documentación del plugin

Aparentemente no cargabas bien la librería. Como no puedo accceder a tu sistema de directorios he cargado la librería a través de un CDN. También te faltaba añadirle un value: al objeto para que se lance el renderizado.

En el ejemplo que nos pones no cargabas tampoco la librería Jquery pero supongo que en tu proyecto si que lo hacías.

Aquí puedes ver el código funcionando:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.js"></script>


<div class="circulito" data-value="5"></div>


<script type="text/javascript">

    $('.circulito').circleProgress({
        size: 50,
        value: 0.75,
        startAngle: 11,
        lineCap: 'round',
        fill: {
            color: "#44aaf2"
        }
    }).on('circle-animation-progress', function (event, progress, stepValue) {
        $(this).find('strong').text(stepValue.toFixed(2));
        // $(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
    });
    

</script>

Anotación: He quitado el PHP de tu código para poder hacer que se reproduzca aquí.

Referencia: Documentación del plugin

Aparentemente no cargabas bien la librería: Sea por que no encuentra el archivo o no tenga permisos el servidor web envía un error en forma de página html, si no incluye las cabeceras de error el navegador carga ese html como si fuera el script ( de ahí que el warning sea que no coincide el tipo mime ). Como no puedo acceder a tu sistema de directorios he cargado la librería a través de un CDN. También te faltaba añadirle un value: al objeto para que se lance el renderizado.

En el ejemplo que nos pones no cargabas tampoco la librería Jquery pero supongo que en tu proyecto si que lo hacías. Al fallar la carga del script del plugin, circleProgress ya no es una función.

Aquí puedes ver el código funcionando:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.js"></script>


<div class="circulito" data-value="5"></div>


<script type="text/javascript">

    $('.circulito').circleProgress({
        size: 50,
        value: 0.75,
        startAngle: 11,
        lineCap: 'round',
        fill: {
            color: "#44aaf2"
        }
    }).on('circle-animation-progress', function (event, progress, stepValue) {
        $(this).find('strong').text(stepValue.toFixed(2));
        // $(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
    });
    

</script>

Anotación: He quitado el PHP de tu código para poder hacer que se reproduzca aquí.

Referencia: Documentación del plugin

Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

Aparentemente no cargabas bien la librería. Como no puedo accceder a tu sistema de directorios he cargado la librería a través de un CDN. También te faltaba añadirle un value: al objeto para que se lance el renderizado.

En el ejemplo que nos pones no cargabas tampoco la librería Jquery pero supongo que en tu proyecto si que lo hacías.

Aquí puedes ver el código funcionando:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.js"></script>


<div class="circulito" data-value="5"></div>


<script type="text/javascript">

    $('.circulito').circleProgress({
        size: 50,
        value: 0.75,
        startAngle: 11,
        lineCap: 'round',
        fill: {
            color: "#44aaf2"
        }
    }).on('circle-animation-progress', function (event, progress, stepValue) {
        $(this).find('strong').text(stepValue.toFixed(2));
        // $(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
    });
    

</script>

Anotación: He quitado el PHP de tu código para poder hacer que se reproduzca aquí.

Referencia: Documentación del plugin