Senast använda

    Öppna ett verktyg så visas det här.

    Förloppsindikatorgenerator

    Utforma animerade förloppsindikatorer

    Dela det här verktyget

    Rapportera ett problem

    Beskriv problemet utan att ta med privat indata eller privata filer.

    Hur användbart var verktyget?

    Hur användbart var verktyget?

    Utforma din förloppsindikator

    Välj en form och ett tema och finjustera sedan detaljerna.

    Snabbteman
    Fler inställningar
    Mått och form
    Färger och gradient
    Kantlinjeinställningar
    Etiketter
    Animation och effekter

    Förhandsgranskning och kod

    Förhandsgranskningsbakgrund

    Förhandsgranskningen anpassas efter den här panelen. Exporterade mått och kod behåller den storlek du valt.

    Förhandsgranskningen har uppdaterats. Kopiera både HTML och CSS till ditt projekt.

    Förhandsgranskning av PNG-export

    PNG är en statisk återgivning med vit bakgrund. Den följer den ursprungliga canvasstilen: gradienter och kantlinjer används bara på linjära staplar, medan CSS-sken, ränder, pulsering och övergångar finns i liveförhandsgranskningen och i koden.

    HTML-kod
    <div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-label">
    Läser in... 65%
  </div>
</div>
    CSS-stilar
    .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 och CSS hör ihop. De beskriver det här fasta värdet, så koppla förloppsuppdateringar och tillgänglighetssemantik i din app.

    Snabbtips
    • Linjär: laddningsindikatorer och filuppladdningar.
    • Cirkulär: mätare och färdighetsnivåer.
    • Halvcirkulär: instrumentpanelsvärden och kvotanvändning.
    • Vertikal: batteri- och lagringsindikatorer.
    • Punkter: sidnumrering och förlopp genom en sekvens.
    • Stegvis: milstolpar i processer med flera steg.

    Om Förloppsindikatorgenerator, gratis CSS-generator för förloppsindikatorer

    Skapa snygga, animerade förloppsindikatorer med anpassningsbara färger, etiketter och effekter. Kopiera HTML och CSS tillsammans eller exportera en statisk PNG i vald storlek. Sex former, sex teman och tre övergångskurvor finns att välja bland. PNG-bilden skapas av en separat canvasrenderare: gradienter och kantlinjer tillämpas bara på linjära indikatorer, och CSS-animation, ränder och glöd ingår inte. Granska resultatet i din egen layout innan du använder den här generatorn för förloppsindikatorer online.

    Förloppsindikatorer är ett centralt gränssnittsmönster i modern webb- och mobildesign. De visar laddningsstatus, hur långt en uppgift har kommit, kunskapsnivå och måluppfyllelse. I stället för att koda CSS för hand använder du vår visuella redigerare för att ställa in varje detalj: färger, hörnradie, ränder, gradienter och etiketter. Sedan kopierar du den genererade koden direkt till ditt projekt.

    Verktyget visar en liveförhandsvisning i realtid bredvid en förhandsvisning av canvasexporten, så att du ser exakt hur din förloppsindikator kommer att se ut innan du bestämmer dig. Oavsett om du bygger en mätare till en instrumentpanel, en indikator för filuppladdning, en flerstegsguide eller en prickbaserad sidnavigering har Förloppsindikatorgenerator rätt stil och ren kod som passar.

    Design

    Nyligen tillagda

    Alla verktyg

    Integritetsinställningar

    Välj dina inställningar för analys, annonsering och personalisering. Nödvändig lagring ser till att funktioner som ditt tema och sparade verktyg fortsätter fungera.

    Nödvändig lagring är alltid aktiverad.