Onlangs gebruikt

    Open een tool en die verschijnt hier.

    Voortgangsbalk maken

    Ontwerp geanimeerde voortgangsbalken

    Deze tool delen

    Probleem melden

    Beschrijf het probleem zonder privé-invoer of bestanden toe te voegen.

    Hoe nuttig was deze tool?

    Hoe nuttig was deze tool?

    Ontwerp uw voortgangsbalk

    Kies een vorm en thema en stem de details daarna af.

    Snelle thema's
    Meer instellingen
    Afmetingen en vorm
    Kleuren en kleurverloop
    Randinstellingen
    Labels
    Animatie en effecten

    Voorbeeld en code

    Achtergrond van voorbeeld

    Het voorbeeld past in dit paneel. Geëxporteerde afmetingen en code blijven op de door u gekozen grootte.

    Voorbeeld bijgewerkt. Kopieer zowel de HTML als de CSS voor uw project.

    Voorbeeld van PNG-export

    PNG is een statische weergave met witte achtergrond. Hiervoor geldt de oorspronkelijke canvasstijl: kleurverlopen en randen worden alleen op lineaire balken toegepast; CSS-gloed, strepen, pulsen en overgangen zijn beschikbaar in het live voorbeeld en in de code.

    HTML-markup
    <div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-label">
    Laden... 65%
  </div>
</div>
    CSS-stijlen
    .progress-container {
  width: 400px;
  max-width: 100%;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  
  
}

.progress-bar {
  height: 100%;
  width: 65%;
  background: #3b82f6;
  border-radius: 10px;
  transition: width 1.5s ease-in-out;
  
  
  
}





.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1f2937;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

    HTML en CSS horen bij elkaar. Ze beschrijven deze vaste waarde; koppel voortgangsupdates en toegankelijkheidssemantiek in uw eigen app.

    Snelle tips
    • Lineair: laadindicatoren en bestandsuploads.
    • Cirkelvormig: meters en weergave van vaardigheden.
    • Halfcirkelvormig: dashboardstatistieken en quotagebruik.
    • Verticaal: batterij- en opslagindicatoren.
    • Stippen: paginering en voortgang door een reeks.
    • Stapsgewijs: mijlpalen in processen met meerdere stappen.

    Over Voortgangsbalk maken, gratis CSS-voortgangsbalkgenerator

    Ontwerp fraaie, geanimeerde voortgangsbalken met instelbare kleuren, labels en effecten. Kopieer HTML en CSS samen, of exporteer een statische PNG op de gekozen afmetingen. Er zijn zes vormen, zes thema's en drie overgangscurves beschikbaar. De PNG gebruikt een aparte canvas-renderer: verlopen en randen worden alleen op lineaire balken toegepast en CSS-animatie, strepen en gloed zijn niet inbegrepen. Controleer de uitvoer in uw doellay-out voordat u deze online beschikbare voortgangsbalkgenerator integreert.

    Voortgangsindicatoren zijn een kernpatroon in modern web- en mobiel ontwerp. Ze tonen gebruikers de laadstatus, de voltooiing van taken, vaardigheidsniveaus en het behalen van doelen. In plaats van CSS helemaal zelf te schrijven, configureert u in onze visuele editor elk detail: kleuren, hoekafronding, strepen, verlopen en labels. Vervolgens kopieert u de gegenereerde code rechtstreeks naar uw project.

    De tool biedt een live voorbeeld in realtime naast een voorbeeld van de canvas-export, zodat u precies ziet hoe uw voortgangsbalk eruitziet voordat u hem gebruikt. Of u nu een dashboardmeter, een uploadindicator, een wizard met meerdere stappen of een puntenpaginering bouwt, Voortgangsbalk maken heeft de passende stijl en nette code.

    Ontwerp

    Recent toegevoegd

    Alle tools

    Privacy-instellingen

    Kies uw voorkeuren voor analyse, advertenties en personalisatie. Essentiële opslag zorgt dat functies zoals uw thema en opgeslagen tools blijven werken.

    Essentiële opslag is altijd ingeschakeld.