Progress bar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Progress Developer / Internationale markt

Functieomschrijving Wil jij in een toonaangevende organisatie werken met de ambitie om de (inter-)nationale markt te bewerken? Reageer dan nu! Uitvoeren van analyses ter bevordering van de betrouwbaarheid en performance van de applicatie; Implementeren van functionaliteiten in eigen Back Office pakket; Meedenken over de architectuur en tevens waarborgen van de architectuur; Programmeren van functionele en technische wijzigingen; Bijwerken van documentatie; Troubleshooten van complexe incidenten; Aanroepen van webservices, message handling; Functie-eisen Minimaal HBO werk en denkniveau; 6+ jaar ervaring in software ontwikkeling; Ruime ervaring met Progress / OpenEdge; Zeer sterk analytisch vermogen; Je bent communicatief en je gaat proactief te werk;

Bekijk vacature »

Klaas Sjaak

Klaas Sjaak

07/12/2019 18:34:16
Quote Anchor link
Hallo allemaal,

Ik probeer een progressiebar te maken mbv jquery en css, maar het lukt me niet om de progressiebar te laten teruglopen alleen het aftellen gaat wel goed.

js:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $('div.progress-bar').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft+" s");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};
progress(300,300,$('div.progress-bar'));


css:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.progress {
    margin-top: 3px;
    display: block;
    float: right;
    width: 100%;
    background-color: #19191E;
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress .progress-bar {
    width: 100%;
    background: #60d600;
}


html:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div class="progress"><div class="progress-bar"><span>time left</span></div></div>


Wat doe ik verkeerd?
 
Er zijn nog geen reacties op dit bericht.



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.