⏳ 4 Bästa förloppsindikator-plugins för WordPress 2026 (gratis och betalda)

En besökare öppnar en sida, ser en oändlig vägg av text och lämnar. Inte för att innehållet är dåligt. Hjärnan behöver en visuell referens: hur mycket är kvar att läsa, var befinner jag mig i processen. En förloppsindikator löser detta genom ren perceptionspsykologi.

Men att välja ett plugin för uppgiften är en historia för sig. Ett är designat för färdighetsstaplar i portföljer, ett annat för en fullskärmsförladdare, ett tredje maskerar sig som ett Gutenberg-block. Gör du fel får du en uppsvälld sajtbyggare för en liten remsa.

Här är fyra beprövade WordPress-plugins för förloppsindikatorer för 2026. Gratis och betalda, kortkodsbaserade och blockbaserade, var och en för sitt eget scenario.

💡 Snabb översikt:

• Bestäm var du behöver en förloppsindikator: läsindikator, färdighetsstapel, förladdare eller Gutenberg-block, valet av plugin beror på detta.
• För färdighetsstaplar och portföljer, ta Progress Bar & Skill Bar: gratis, lättviktigt, 34 designer i Pro.
• Om du behöver en visuell byggare med cirkulära, linjära och vertikala staplar utan beroende av kortkoder, StichyX Bar med liveförhandsvisning och SVG-grafik.
• För Gutenberg-användare, Ultimate Blocks: förloppsindikator som ett inbyggt redigerarblock plus 35 ytterligare block i paketet.
• För en förladdare med en animerad splash screen, PageLoader, engångsbetalning $26.

Jämförelsetabell för plugins

1. Progress Bar & Skill Bar

Ett plugin från WpShopMart för dig som behöver "visa färdigheter i procent" utan extra beroenden. Installera, aktivera, generera en kortkod, och stapeln är redan på sidan. Ingen blockredigerare, inget konstruktionsgränssnitt: gå in, ställ in färger och procentsatser, kopiera [PROGRESSBAR_WP id=xx].

Gratisversionen har två designer: cirkulär och linjär. Båda är animerade, stapeln fylls med färg från 0 till det angivna värdet vid skrollning. Under huven finns ett Bootstrap-rutnät, så responsivitet på mobil, surfplattor och datorer fungerar utan extra inställningar.

Pro-versionen för $8 (Personal, 1 sajt) eller $24 (Business, obegränsat) utökar biblioteket till 34 mallar och lägger till dra-och-släpp-sortering av element. Det finns ett halvt cirkeldiagram, halvcirkulär graf, sektionsbakgrunder, finjusterade typsnitt och obegränsat antal färdighetsstaplar per sida.

Fördelar:

• Gratisversionen är fullt fungerande, ingen begränsad funktionalitet.
• Kortkod infogas var som helst: i ett inlägg, widget, tema.
• 52 recensioner på WordPress.org med ett genomsnittligt betyg på 4,5.
• Bootstrap-baserat, orsakar inte konflikter med de flesta teman.

Nackdelar:

• Inte uppdaterat för de senaste större WordPress-versionerna (v1.5.0 testat upp till 6.7.5).
• Gratisversionen begränsad till två designer.
• Inställningsgränssnittet är visuellt föråldrat.

💵 Gratis / Pro från $8.

🔗 Ladda ner på WordPress.org | 🔗 Pro-version

2. StichyX Bar

Om standarddesigner inte fungerar och du inte har tid att koda anpassade staplar manuellt, ger StichyX Bar dig en visuell byggare med liveförhandsvisning direkt i adminpanelen. Horisontell, vertikal, cirkulär SVG: geometrin ställs in på en minut, utan en enda rad CSS.

Under huven finns ren JavaScript, ingen jQuery, inga tredjepartsbibliotek (förutom Chart.js för diagram). SVG-rendering bibehåller skärpan på retinaskärmar, och animeringsinställningar, från 500 till 5000 ms, låter dig matcha beteendet till sidans rytm. Utlösare: skrollning, hover eller klick.

Gruppbyggaren förtjänar särskilt omnämnande: flera staplar sätts samman till ett rutnät med 1-3 kolumner och animeras i kaskad. För en portfölj eller "Om teamet"-sida, ett färdigt färdighetsrutnät utan ett sidbyggarplugin. Emojis och ikoner inuti stapeln stöds direkt.

Pluginet är aktivt utvecklat: v1.2.3 från juni 2026, integration med Elementor och Gutenberg, ACF-stöd för dynamisk data. Gratis, utan Pro-komplikationer.

Fördelar:

• Visuell byggare med liveförhandsvisning i adminpanelen.
• Tre geometrier (horisontell, vertikal, cirkulär SVG) i ett plugin.
• Gruppbyggare för färdighetsrutnät med kaskadanimation.
• Vanilla JS, laddar inte jQuery.

Nackdelar:

• Endast 10 aktiva installationer på WordPress.org, pluginet är mycket nytt.
• En utvecklare, ingen garanti för långsiktig support.
• Ingen förladdare och läsindikator (endast innehållsstaplar).

💵 Gratis.

🔗 Ladda ner på WordPress.org

3. Ultimate Blocks

Inte bara ett plugin för förloppsindikatorer, utan en hel uppsättning med 36 Gutenberg-block, varav ett är Progress Bar. Det installeras som ett vanligt block i redigeraren: välj cirkel eller linje, ställ in färg, tjocklek, procentvärden, så animeras indikatorn vid scrollning.

Den främsta fördelen med Ultimate Blocks är sammanhanget. Förloppsindikatorn är här inget isolerat verktyg, utan en del av ett ekosystem: i samma inlägg kan du lägga till Content Toggle (dragspelsmeny), Table of Contents, Call to Action, Review-block med schemamarkering. Inga shortcodes, allt är inbyggt i Gutenberg.

Pluginet utvecklas aktivt: v3.5.7 från juni 2026, 50 000+ aktiva installationer, 728 recensioner med ett genomsnittligt betyg på 5 stjärnor. Gratisversionen är generös: Progress Bar, Content Filter, Star Rating och ett par dussin till block utan betalning.

Fördelar:

• Full Gutenberg-integration, inget nytt gränssnitt att lära sig.
• 36 block i ett plugin, förloppsindikatorn är bara ett av dem.
• Aktiv utveckling (uppdatering juni 2026).
• Schemamarkering i Review- och HowTo-block.

Nackdelar:

• Förloppsindikatorn är inte huvudfokus, utan en av 36 funktioner.
• Inte lämpligt för teman som inte är byggda för Gutenberg.
• Vissa block (Coupon, Timeline) finns bara i Pro.

💵 Gratis / Pro-version.

🔗 Ladda ner på WordPress.org

4. PageLoader

PageLoader löser en angränsande uppgift: inte en läsindikator eller kompetensbar, utan en fullskärmsförladdare med förloppsindikator. En besökare kommer till sajten och ser en splash screen med animerad laddning. När sidan är klar försvinner förladdaren mjukt.

I inställningarna anger du en timeout eller verklig laddningsprocent, bakgrundsbild (egen eller från biblioteket), ikon, text. Förloppsindikatorn kan placeras var som helst på skärmen, justera färg och tjocklek. Den inbyggda live-redigeraren visar ändringar i realtid, inget behov av att växla mellan adminpanel och sajt.

Pluginet är kompatibelt med alla teman och enheter. Säljs på CodeCanyon utan gratisversion: engångsbetalning, ingen prenumeration.

Fördelar:

• Den enda fullskärmsförladdaren i urvalet.
• Live-redigerare med omedelbar förhandsvisning.
• Finjusterad laddningstajming.
• Mjuka animationer för visning och försvinnande.

Nackdelar:

• Endast betalversion ($26).
• Inte lämplig för kompetensbarer och läsindikatorer.
• Uppdateras inte via WordPress.orgs repository.

💵 $26 engångsbelopp (12 månaders support).

🔗 Sida på CodeCanyon | 🔗 Live-demo

Förloppsindikatorer är en mikrofunktion, och det finns ingen anledning att betala för mycket för den med en sajtbyggare med 50 block. Här är tre urvalsregler.

Om sajten körs på den klassiska redigeraren och du behöver kompetensbarer, ta Progress Bar & Skill Bar. Shortcoden [PROGRESSBAR_WP id=xx] infogas i valfritt textblock, widget eller tema. Gratisversionen täcker 80% av uppgifterna, Pro för $8 utökar designen.

Om du behöver en visuell byggare och flera geometrier utan att vara bunden till en specifik redigerare, StichyX Bar med live-förhandsvisning och SVG-grafik. Horisontella, cirkulära och vertikala barer ställs in i adminpanelen på en minut.

Om sajten körs på Gutenberg och förloppsindikatorn bara är ett av behoven, installera Ultimate Blocks. Förloppsindikatorn kommer med innehållsförteckning, accordion, CTA och Review-block. Ett plugin istället för fem.

Om du behöver en fullskärmsförladdare, PageLoader. Det enda verktyget i urvalet för laddnings-splash screen, med en engångsbetalning utan prenumerationer.

I videon ovan visas en steg-för-steg-process för att installera och ställa in en förloppsindikator i WordPress: från val av plugin till publicering på en sida.

⁉️🤔 Vanliga frågor

Hur skiljer sig en förloppsindikator från en förladdare?

En förloppsindikator visar en procentsats inuti innehåll: kompetens, trattsteg, läsindikator. En förladdare är en splash screen innan sajten laddas: en besökare ser en bar eller animation medan sidan renderas. PageLoader är en förladdare; Progress Bar & Skill Bar och StichyX Bar är innehållsbarer.

Kan jag installera en förloppsindikator utan ett plugin?

Tekniskt sett ja, via HTML <progress>, CSS-animationer och JavaScript. Men utan ett plugin förlorar du: visuell redigerare, responsivitet direkt ur lådan, enkel infogning via shortcode eller block. För en icke-teknisk användare sparar ett plugin 2-3 timmars manuell kodning per bar.

Vilket plugin är bättre för Gutenberg?

Ultimate Blocks, det enda i urvalet med ett native Gutenberg-block. Förloppsindikatorn infogas som ett block, inställningar i redigerarens sidopanel. Inget behov av att lämna gränssnittet, kopiera shortcodes eller växla till adminpanelen. StichyX Bar stöder också ett Gutenberg-block, men dess fokus är en visuell byggare, inte ett blockekosystem.

Påverkar en förloppsindikator sajtens hastighet?

Ett kvalitetsplugin (Progress Bar & Skill Bar, StichyX Bar) lägger till 2-5 KB CSS och 1-3 KB JS, detta påverkar inte LCP. Ultimate Blocks laddar mer på grund av 36 block, men asynkront och endast de som används. Förladdare (PageLoader) laddas först och kan lägga till 200-500 ms till FCP, vilket är värt att beakta. Alla fyra plugins i urvalet laddar stilmallar asynkront och blockerar inte rendering.

Behövs en Pro-version för cirkulära barer?

Beror på pluginet. Progress Bar & Skill Bar: cirkulära barer endast i Pro ($8). StichyX Bar: cirkulära SVG-barer gratis i visuell byggare. Ultimate Blocks: cirkulära och linjära gratis i Gutenberg-block.

💎 Vad du ska installera 2026: slutlig sammanställning

Det finns inget universellt svar, scenariot styr valet.

• Om sajten körs på den klassiska redigeraren och du behöver kompetensbarer, Progress Bar & Skill Bar. 34 designer i Pro, shortcode utan redigeringsberoende, Bootstrap-baserad.
• Om du behöver flera geometrier med live-förhandsvisning, StichyX Bar. Visuell byggare, SVG-cirklar, kompetensrutnät och inte en rad CSS.
• Om sajten lever på Gutenberg, Ultimate Blocks. Förloppsindikator som ett native block plus innehållsförteckning, accordion och CTA i ett plugin.
• Om du behöver en laddnings-splash screen, PageLoader. Det enda alternativet bland de fyra som specifikt täcker en förladdare, inte innehållsbarer.

Börja med gratisversionen av Progress Bar & Skill Bar: på 5 minuter installerar du den första baren och förstår om två designer räcker för dig. Och vilket plugin för förloppsindikatorer använder du, skriv i kommentarerna.