1

Estimados estaría agradecido de su ayuda , estoy generando unas barras de progreso por decirlo de alguna forma, las genero de forma dinámica con PHP según una consulta a una base de datos, resulta ser que estoy intentando animar el ancho de estas barras de forma progresiva con la función animate(), pero en ocasiones el ancho no parte de 0 si no que a veces parte del 10 o 20% o simplemente no se muestra la animación

Aquí muestro el contenido dinámico mediante Ajax y luego animo los elementos

    $(document).ready(function(){
        mostrar_registros();
        pagina_activa();

    });
    function mostrar_registros(){
        var action = 'fetch_data';  
        var clave = "<?php echo $_GET['clave'];?>"
        $.ajax({  
            url:"<?php echo $raiz;?>logica/mostrar_servicio.php",
            method: "POST",
            dataType: "json",
            data:{ action:action,clave:clave},      
            success:function(data){
                $('.listado_registros').html(data.html1);   
                animar_ancho(".nm-fabrica",50,10);
                animar_ancho(".hp-fabrica",50,10);
            }
        }); 
    } 
    function animar_ancho(elemento,ancho,velocidad){
        $(elemento).animate({width: ancho+"%"}, velocidad);
    }   

Aquí el script PHP que genera las barras que vendrían siendo los hr

<?php 
$CONTENIDO = '';
$repros = $con->obtenerdatos("*",'estadisticas_repro',"?",[1]);
if(count($repros) > 0){
    $CONTENIDO .= ' <div class="container estadisticas-repro mb-4">
                        <div class="row">';
    for($x = 0;$x < count($repros);$x++){
        $fila = $repros[$x];
        $hp_total = $fila['hp_fabrica'] + $fila['hp_maximo'];
        $hp_repro = $fila['hp_fabrica'] + $fila['hp_ganancia'];
        $nm_total = $fila['nm_fabrica'] + $fila['nm_maximo'];
        $nm_repro = $fila['nm_fabrica'] + $fila['nm_ganancia'];
        $CONTENIDO .= '     <div class="col-12 text-center">
                                <h3>'.$fila['descripcion'].'</h3>
                            </div>
                            <div class="col-6">
                                <h6>HP FABRICA<span><strong class="float-right">'.$fila['hp_fabrica'].'</strong></span></h6>
                                <div class="contenedor-line">
                                    <hr class="line-maximo" style="width:calc((100% / '.$hp_total.') * '.$hp_total.')">
                                    <hr class="line-fabrica hp-fabrica">
                                </div>
                                <h6 class="mt-3">NM FABRICA<span><strong class="float-right">'.$fila['nm_fabrica'].'</strong></span></h6>
                                <div class="contenedor-line">
                                    <hr class="line-maximo" style="width:calc((100% / '.$nm_repro.') * '.$nm_repro.')">
                                    <hr class="line-fabrica nm-fabrica">
                                </div>
                            </div>
                            <div class="col-6">
                                <h6>HP GANANCIA<span><strong class="float-right">'.$hp_repro.' (<span class="text-danger">+'.$fila['hp_ganancia'].'</span>)</strong></span></h6>
                                <div class="contenedor-line">
                                    <hr class="line-maximo" style="width:calc((100% / '.$hp_total.') * '.$hp_total.')">
                                    <hr class="line-ganancia" style="width:calc((100% / '.$hp_total.') * '.($fila['hp_fabrica'] + $fila['hp_ganancia']).')">
                                    <hr class="line-fabrica" style="width:calc((100% / '.$hp_total.') * '.$fila['hp_fabrica'].')">
                                </div>                                
                                <h6 class="mt-3">NM GANANCIA<span><strong class="float-right">'.$nm_repro.' (<span class="text-danger">+'.$fila['nm_ganancia'].'</span>)</strong></span></h6>
                                <div class="contenedor-line">
                                    <hr class="line-maximo" style="width:calc((100% / '.$nm_total.') * '.$nm_total.')">
                                    <hr class="line-ganancia" style="width:calc((100% / '.$nm_total.') * '.($fila['nm_fabrica'] + $fila['hp_ganancia']).')">
                                    <hr class="line-fabrica" style="width:calc((100% / '.$nm_total.') * '.$fila['nm_fabrica'].')">
                                </div>  
                            </div>';
    }
    $CONTENIDO .= '     </div>
                    </div>
                    ';
}
1
  • y que has intentado?
    – user46896
    Commented el 30 sept. 2021 a las 14:09

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.