Como trabalhar com Progressbar em CSS3

Os usuários são impacientes, e às vezes um processo leva algum tempo para ser concluído. Uma barra de progresso torna possível para o desenvolvedor CSS3 para manter o usuário informado sobre o progresso de uma tarefa.

estratégias de programação modernos tentam impedir que o usuário espera em tudo através da realização de tarefas mais longas no fundo, mas às vezes um usuário não pode prosseguir até que a tarefa é feita. Este é o tempo que você precisa confiar em uma barra de progresso para manter o usuário de tentar parar o processo antes de ser concluída.

O exemplo a seguir mostra como usar uma barra de progresso. Neste caso, a barra de progresso é atualizado através de um circuito fechado de temporização. Cada vez que o tempo terminar, a barra de progresso é atualizado, eo temporizador é reiniciada.

O resultado é que o indicador de progresso parte se move da esquerda para a direita e que o temporizador, eventualmente, pára quando o indicador se move todo o caminho para a direita. (Você pode encontrar o código completo para este exemplo no Chapter pasta 06 Widgets do código para download como Progressbar.HTML).

// Configurar a barra de progresso $ (function () {$ ( "# Progress") progressbar ({value:. 0}) -}). // Criar uma variável para manter o temporizador object.var Timer - // Criar um variável para manter a função Timeout timeout.var total de startTimer () {// Inicializar o timeout.Timeout = 0 -.. // Definir o progresso valor máximo bar $ ( "# Progress") progressbar ( "opção", "max ", parseInt ($ (" # StartValue ") val ().)) - // Criar o temporizador variable.Timer = window.setTimeout (UpdateTimer, 100) -} UpdateTimer function () {// Obter o máximo value.var MaxTime = $ ( "# Progress") progressbar ( "opção", "max".) - // Verifique se o fim do cycle.if timing (Timeout> = MaxTime) return - // Atualizar o Timeout value.Timeout + = 100 -.. // atualizar a porcentagem concluída $ ( "# PercentDone") texto (Math.round ((Timeout / MaxTime) * 100).) - // Defina o valor da barra de progresso $ ( "# Progress"). progressbar ( "value", Timeout) - // Criar o temporizador variable.Timer = window.setTimeout (UpdateTimer, 100) -}

A primeira tarefa é criar a barra de progresso próprio chamando progressbar (). Observe que você deve fornecer um valor inicial como entrada. No entanto, a configuração da barra de progresso não está completo - a chamada para startTimer () mais tarde irá executar algumas tarefas de configuração adicionais.

A função startTimer () é chamado quando o usuário clica no botão Start Timer no formulário. Essa função inicializa duas variáveis ​​globais. Timer é um objeto de timer usado para animar a barra de progresso. Tempo de espera é o tempo decorrido corrente em milissegundos.

Esta função também configura a opção máximo para a barra de progresso. O indicador é uma percentagem do valor actual e as propriedades valor máximo. O valor máximo é fornecido pelo usuário através de um controle, StartValue.

Sempre temporizador expira, ele chama UpdateTimer (). UpdateTimer () obtém o valor de tempo máximo entre a barra de progresso e coloca-lo em MaxTime. Em seguida, ele verifica se Timeout é inferior a MaxTime. Quando Timeout finalmente chega MaxTime, a barra de progresso atingir 100 por cento e é hora de parar o temporizador.

O próximo passo é atualizar Timeout para o próximo valor. A cada iteração avanços de tempo de espera 100 milissegundos.

Depois de atualizar Timeout, o exemplo atualiza a porcentagem na tela, que é armazenado em um com um id PercentDone. Ele também atualiza atributo de valor da barra de progresso para que a barra se move para a posição seguinte.

A incêndios temporizador apenas uma vez. Para criar o próximo ciclo da iteração, o exemplo deve redefinir temporizador. Quando a próxima espera de 100 milissegundos é longo, UpdateTimer () é chamado novamente eo processo começa novamente.