Progress bar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Backend / full stack PHP developer met ervaring

Backend / full stack PHP developer met ervaring Wie wij zoeken Wij zoeken een ervaren PHP backend / full stack developerdie zelfstandig en gestructureerd werkt. Wat doen wij? Alflex Technologies ontwikkelt en produceert maatwerkelektronica (hardware en embedded software), mobiele apps, web- en PC-applicaties voor een hele brede markt (BtB). Unieke producten met functies als legionellabestrijding, corrosiebestrijding, smart building/ lightning, (medicijn)verpakkingsmachines, sensoring en nog veel meer. Deze producten worden steeds vaker voorzien van connectiviteit met behulp van LoRa, NB-IoT, LTE-M en zijn daarmee verbonden met het Internet (IoT). Dit stelt weer extra eisen op het gebied van dataverzameling, -ontsluiting en -presentatie

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.