JQuery UI - barras de progresso

Índice
Existem diferentes elementos em sites modernos que possuem funcionalidades distintas e que tornam as tarefas específicas de um site simples e ainda mais marcantes e agradáveis ​​à vista, tornando a navegabilidade do site e a usabilidade proporcionada ao usuário extremamente ótimas.
Barras de Progresso
Barras de progresso são responsáveis ​​por mostrar o andamento de uma tarefa, como transferência ou upload de arquivos, upload de informações, etc.
O método progressbar ()
O método Barra de progresso () declara que um elemento do HTML deve ser gerenciado e tratado na forma de uma barra de progresso. Suas opções são um objeto que especifica seu comportamento e aparência.
O método Barra de progresso () pode ser usado de duas maneiras:
• $ (seletor, contexto) .progressbar (opções)
• $ (seletor, contexto) .progressbar ("ação", parâmetros)
Vejamos um exemplo de seu uso:
  • Primeiro, incluímos os arquivos necessários, as bibliotecas de jQuery assim como o CSS:



  • Adicionamos alguns estilos para os rótulos e a barra, como:

  • Instanciamos nosso método Barra de progresso () Nós o associamos a um contêiner e, adicionalmente, adicionamos alguns eventos para detectar quando o upload ou transferência está em andamento e, finalmente, quando foi concluído:

  • Finalmente adicionamos nosso código HTML e os rótulos onde nossa barra de progresso será exibida:


Carregando…

A implementação de nosso código ficaria assim no navegador:

Por fim, deixamos aqui o código completo para que você possa testá-lo por si mesmo, sem esquecer que podemos experimentar diferentes opções, eventos e até estilos para nossa barra de progresso.




jQuery UI Progressbar - rótulo personalizado

href = "http: //code.jquery.c… /jquery-ui.css" />







Carregando…

Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo

Você vai ajudar o desenvolvimento do site, compartilhando a página com seus amigos

wave wave wave wave wave