Jump to content
fernandoxx

Como montar um ProgressBar

Recommended Posts

Bom Dia, Pessoal

     Estou tentando fazer um progressBar, estou aprendendo o funcionamento ainda, mais quem pudesse estar orientando-me , eu fiz aparecer o desenho do progressBar na tela, so preciso que me orientem de como passar os dados para o progressBar, grato a todos que postarem no auxilio, obrg

 


 $query ="SELECT  *
          FROM cadcliente
          ORDER BY Id ASC";  
$result = mysqli_query($connect, $query);  
$total = mysqli_num_rows($result);

$num_rows = mysqli_num_rows($result);
$porcentagem = (($total) / $total) * 100;

echo " $num_rows Rows\n";

?>

<?php
      while($row = mysqli_fetch_array($result))  
        {  
<!-- START PROGRESS BARS -->
      <h2 class="page-header">Progress Bars</h2>

      <div class="row">
        <div class="col-md-6">
          <div class="box box-solid">
            <div class="box-header with-border">
              <h3 class="box-title">Progress Bars</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <p><code>.progress</code></p>
              <div class="progress">
                <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
              <p>Class: <code>.sm</code></p>
            </div>
          </div>
        </div>


}
?>    

Share this post


Link to post
Share on other sites

Vamos lá!

 

A porcentagem está correta? Caso a resposta seje

sim, então segue exemplo:

 

CÓDIGO

<?php
	$query = "SELECT* FROM cadcliente ORDER BY Id ASC";

	$result = mysqli_query($connect, $query);
	$total = mysqli_num_rows($result);
	$num_rows = mysqli_num_rows($result);

	$porcentagem = ( ( $total ) / $total ) * 100;

	echo "$num_rows Rows\n";

	while ( $row = mysqli_fetch_array ( $result ) ) {
		echo '
			<!-- START PROGRESS BARS -->
			<h2 class="page-header">Progress Bars</h2>

			<div class="row">
				<div class="col-md-6">
					<div class="box box-solid">
						<div class="box-header with-border">
							<h3 class="box-title">Progress Bars</h3>
						</div>

						<!-- /.box-header -->
						<div class="box-body">
							<p><code>.progress</code></p>

							<div class="progress">
								<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="' . $porcentagem . '" aria-valuemin="0" aria-valuemax="100" style="width: ' . $porcentagem . '%">
									<span class="sr-only">' . $porcentagem . '% Complete (success)</span>
								</div>
							</div>

							<p>Class: <code>.sm</code></p>
						</div>
					</div>
				</div>
			</div>
		';
	}
?>

 

 

O código acima está obtendo os valores da váriavel

$porcentagem e inserindo elas nos campos da 

progress bar, assim, setando o preenchimento do

mesmo!

Share this post


Link to post
Share on other sites

Bom Dia, ShadowDLL

 

Grato pelas dicas, fiz conforme segue seu codigo, esta mostrando na tela o progressBar preenchido em 100% de cada registro, gostaria que o progressBar fosse sendo preenchido conforme seja lido a tabela do cliente, sendo apresentado o progressbar sendo preenchido na tela. Grato 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By mateusottobr
      Fala galera tudo certo ? minha duvida é a seguinte:
      Tenho uma div de class="progress-wrap progress", e dentro dela no próprio HTML existe 2 parâmetros chamados data-progresspercent="0" e outro data-speed="1000",preciso alterar esses 2 parâmetros com j query, como poderia fazer ?
      segue a div.
      <div class="progress-wrap progress" data-progresspercent="100" data-height="5px" data-width="100%" data-speed="1000" data-color="0BAE72"> já tentei...
      $(function carregar() { $(".progress-wrap progress").attr("data-progresspercent","50"); });
      mas não funciona, exibi também esses mesmos valores na tela com um alert, mais retornou como undefined.
      Obrigado!
    • By Wilterson Garcia
      Olá a todos.!

      eu estou fazendo um sistema de uploads, onde utilizo um plugin jquery que faz essa funcao (Jquery Filer), e eu preciso fazer uma barra de progresso do upload, que é enviado por ajax para o php. O upload, e o front estao funcionando, só resta a barra de progresso.

      eu queria fazer uma que utilizasse somente javascript, algo com listener (eu acho), só que ja pesquisei um monte e ja tentei uns codigos de outros, só que nada funcionou.

      Na propria documentação do plugin tem uma menção à ProgressBar, só que eu nao consegui, e nao acho ninguem que conheca esse plugin pra me dar uma luz. segue o código que eu fiz...



      $('.file_input').filer({ maxSize: 5120, limit: 10, showThumbs: true, templates: { box: '<ul class="jFiler-item-list"></ul>', item: '<li class="jFiler-item">\ <div class="jFiler-item-container">\ <div class="jFiler-item-inner">\ <div class="jFiler-item-thumb">\ <div class="jFiler-item-status"></div>\ <div class="jFiler-item-info">\ <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\ </div>\ {{fi-image}}\ </div>\ <div class="jFiler-item-assets jFiler-row">\ <ul class="list-inline pull-left">\ <li><span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span></li>\ </ul>\ <ul class="list-inline pull-right">\ <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\ </ul>\ </div>\ </div>\ </div>\ </li>', itemAppend: '<li class="jFiler-item">\ <div class="jFiler-item-container">\ <div class="jFiler-item-inner">\ <div class="jFiler-item-thumb">\ <div class="jFiler-item-status"></div>\ <div class="jFiler-item-info">\ <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\ </div>\ {{fi-image}}\ </div>\ <div class="jFiler-item-assets jFiler-row">\ <ul class="list-inline pull-left">\ <span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span>\ </ul>\ <ul class="list-inline pull-right">\ <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\ </ul>\ </div>\ </div>\ </div>\ </li>', progressBar: '<div class="bar"></div>', itemAppendToEnd: true, removeConfirmation: true, _selectors: { list: '.jFiler-item-list', item: '.jFiler-item', progressBar: '.bar', remove: '.jFiler-item-trash-action', } }, addMore: true, captions: { removeConfirmation: "Deseja remover o arquivo?", errors: { filesLimit: "O limite de arquivos para ser enviado é de {{fi-limit}} arquivos por envio.", filesType: "Only Images are allowed to be uploaded.", filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.", filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB." } } }); Esse é o código do plugin Jquery.Filer, o código peguei da documentação do próprio.
       
       
      Agora, o codigo que eu uso pra enviar o formulario por ajax.
      // Cria uma variável que vamos utilizar para verificar se o // formulário está sendo enviado var enviando_formulario = false; // Captura o evento de submit do formulário $('#formUpload').submit(function(){ // O objeto do formulário var obj = this; // O objeto jQuery do formulário var form = $(obj); // O botão de submit var submit_btn = $('.enviar'); // O valor do botão de submit var submit_btn_text = submit_btn.html(); // Dados do formulário var dados = new FormData(obj); if(form.valid()){ // Retorna o botão de submit ao seu estado natural function volta_submit() { // Remove o atributo desabilitado submit_btn.removeAttr('disabled'); // Retorna o texto padrão do botão submit_btn.html(submit_btn_text); // Retorna o valor original (não estamos mais enviando) enviando_formulario = false; } // Não envia o formulário se já tiver algum envio if ( ! enviando_formulario ) { // Envia os dados com Ajax $.ajax({ // Antes do envio beforeSend: function() { // Configura a variável enviando enviando_formulario = true; // Adiciona o atributo desabilitado no botão submit_btn.attr('disabled', true); // Modifica o texto do botão submit_btn.text('Enviando...'); // Remove o erro (se existir) $('.error').remove(); }, // Captura a URL de envio do form url: form.attr('action'), // Captura o método de envio do form type: form.attr('method'), // Os dados do form data: dados, // Não processa os dados processData: false, // Não faz cache cache: false, // Não checa o tipo de conteúdo contentType: false, // Se enviado com sucesso success: function( data ) { volta_submit(); // Se os dados forem enviados com sucesso if ( data == 'OK' ) { swal("Concluído!", "Arquivos enviados com sucesso!", "success"); } else { alert(data); // Volta o botão de submit volta_submit(); swal({ title: "Erro!", text: "Falha ao enviar arquivos!", type: "error", confirmButtonColor: "#78caed", confirmButtonText: "OK", closeOnConfirm: true }); } }, // Se der algum problema error: function (request, status, error){ // Volta o botão de submit volta_submit(); swal({ title: "Erro!", text: "Falha ao enviar arquivos!", type: "error", confirmButtonColor: "#78caed", confirmButtonText: "OK", closeOnConfirm: true }); } }); } } // Anula o envio convencional return false; });
      Se alguem puder me ajudar, eu agradeço..


      Abraços.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.