https://cdn-useast1.kapwing.com/static-pages/prod/_next/static/chu…/progress-bar-4b860b6b28dd8089.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9537],{15388:function(e,o,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/tools/add-effects/progress-bar",function(){return t(34536)}])},29263:function(e,o,t){"use strict";var r=t(20503),s=t(73732),a=t(11662),i=t(79027),n=t(77353),d=t.n(n);o.Z=e=>{let{infoArr:o}=e,[t,n]=(0,s.useState)(0),[c,l]=(0,s.useState)(!1);return(0,a.Z)(()=>{c||n(e=>{let t=e+1;return t>=o.length?0:t})},3e3),(0,r.jsx)("div",{className:d().wrapper,onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),children:(0,r.jsxs)("div",{className:d().container,children:[(0,r.jsx)("div",{className:d().left,children:o.map((e,o)=>{let{header:s,description:a,link:i}=e,c=d().section;return o===t&&(c+=" "+d().selectedSection),(0,r.jsxs)("div",{className:c,onClick:()=>{n(o)},children:[(0,r.jsx)("div",{className:d().header,children:s}),(0,r.jsx)("div",{className:d().description,children:a}),i&&i.text&&(0,r.jsx)("a",{href:i.href,className:d().link,children:i.text})]},s)})}),(0,r.jsx)("div",{className:d().right,children:(()=>{let e=o[t],{media:s}=e;return s.poster?(0,r.jsx)("a",{href:"/studio/editor",className:d().video,children:(0,r.jsx)("video",{className:d().video,controls:!0,src:s.src,playsInline:!0,preload:"auto",poster:s.poster,autoPlay:!0,muted:!0})}):(0,r.jsx)("a",{href:"/studio/editor",className:d().image,children:(0,r.jsx)(i.Z,{layout:"fill",objectFit:"contain",src:s.src,alt:s.alt})})})()})]})})}},5050:function(e,o,t){"use strict";t.d(o,{E:function(){return s}});let r=()=>[{text:"Add Effects to Video",url:"/tools/add-effects"},{text:"Add Freeze Frame to Video",url:"/tools/add-effects/freeze-frame"},{text:"Add Glitch Effect to Video",url:"/tools/add-effects/glitch"},{text:"Add Transition to Video",url:"/tools/add-effects/video-transitions"},{text:"Add Progress Bar to Video",url:"/tools/add-effects/progress-bar"},{text:"Add Audio Waveform to Video",url:"/tools/add-effects/waveform"},{text:"Add Ken Burns Effect",url:"/tools/add-effects/ken-burns-effect"},{text:"Add TV Static Effect",url:"/tools/add-effects/tv-static"},{text:"Add VHS Effect",url:"/tools/add-effects/vhs"},{text:"Split Screen Video Editor",url:"/tools/make/split-screen"}],s=e=>r().filter(o=>o.url!==e)},34536:function(e,o,t){"use strict";t.r(o),t.d(o,{data:function(){return c},default:function(){return l}});var r=t(20503);t(73732);var s=t(78381),a=t(63227),i=t(27575),n=t(29263),d=t(5050);let c={meta:{title:"Video Progress Bar — Add Progress Bar to Video — Kapwing",canonicalLink:"https://www.kapwing.com/tools/add-effects/progress-bar",description:"Easily add a progress bar to videos to show how much time is remaining. This progress meter is free, customizable, and perfect for short-form videos.  ",keywords:"video progress bar, progress bar video, progress bar generator, generate progress bar, progress bars, progress bar, progress bar maker",ogImage:"https://cdn-useast1.kapwing.com/static/ZK8-Add-Progress-Bar.webp"},origin:"add-effects/progress-bar",url:"/tools/add-effects/progress-bar",splash:{header:"Add Progress Bar to Video",description:"Add a styled video progress bar online for free",screenshot:"https://cdn-useast1.kapwing.com/static/_mz-progressbar.webp",tooltip:a.p.ProgressBar},customCTAText:"Choose a video",topContext:{header:"What is a progress bar?",screenshot:"https://cdn-useast1.kapwing.com/static/fd6-Add-Progress-Bar-Paper.webp",description:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("p",{children:"Progress bars are perfect for giving your audience a preview of how long your video will be. Embedding a dynamic progress bar into your video increases engagement on social media sites like Instagram and Twitter."}),(0,r.jsx)("p",{children:"Kapwing is an easy online tool that allows you to add a dynamic progress bar to the bottom of your video or GIF. Simply upload your video, click on Elements, and select Add progress bar. You'll be able to easily adjust the style, position, and color of your progress bar."})]})},context:{header:"Adding a progress bar to your video",description:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("p",{children:"If you want viewers to get a visual sense of how long your video content is going to be without having to watch the entire video, a progress bar is a great element to add to keep viewers engaged through the entire duration of your video."}),(0,r.jsx)("p",{children:"A progress bar that is burned directly into your video can also give viewers a sense of where they are in the total time of the video. This will encourage viewers to stick around until the end of the video if they see that they've already made a decent amount of progress while watching."}),(0,r.jsx)("p",{children:"Kapwing is an easy, online video editor that allows you to add a progress bar to your videos, but also so much more. After you add a progress bar, you can also resize your video to the right dimensions, add text, subtitle your content, and a whole lot more."})]}),moreContext:{content:(0,r.jsx)(n.Z,{infoArr:[{header:"Choose unique styles",description:"Add the progress bar style that matches your aesthetic. 

1Choose between glowing, gradient, background and solid progress bars, or use them all. Customize the color, size, and position of your progress bar to what fits your content style best.",media:{src:"https://cdn-useast1.kapwing.com/static/H0z-morphe.webp",alt:"Surrounding progress bar"}},{header:"Share On Social Media",description:"Keep your audience engaged in your post by showing how long your video is! Play with opacity for a modern twist. The progress bar feature is perfect for videos posted on social media.",media:{src:"https://cdn-useast1.kapwing.com/static/Qc_-pink.webp",alt:"Pink progress bar"}},{header:"Add To Any Video",description:"Use Kapwing's progress bars for any video you have! Add a graphic element to your video with a full-screen progress bar. Kapwing's online progress bar tool lets you add progress bars to mp4 files and even static images.",media:{src:"https://cdn-useast1.kapwing.com/static/X4x-chocolate.webp",alt:"Chocolate progress bar"}}]})}},resources:[{link:"/resources/how-to-add-an-animated-progress-bar-on-a-video/",image:"https://www.kapwing.com/resources/content/images/size/w2000/2020/04/How-to-add-a-progrss-bar-on-social-media-videos-.jpeg",title:"How to Add an Animated Progress Bar on a Video"},{link:"/help/how-to-use-elements-on-kapwing/",image:"https://www.kapwing.com/help/content/images/size/w1000/2021/12/[email protected]",title:"How to Use Elements on Kapwing"},{link:"/tools/adjust/speed",image:"https://cdn-useast1.kapwing.com/static/[email protected]",title:"How to Speed Up Videos Online"}],steps:{type:s.L.MULTI_BANNER,header:"How to Add a Progress Bar to Video Online",screenshot:{poster:"https://cdn-useast1.kapwing.com/static/QWe-Add_Progress_Bar.webp",src:"https://cdn-useast1.kapwing.com/static/nWx-Add-Progress-Bar-How-to.mp4"},step1:{header:"Upload your video",description:"Upload or drag and drop your video to start a new project.",image:"https://cdn-useast1.kapwing.com/static/LKr-clicktoupload.webp"},step2:{header:"Add progress bar",description:"Open the “Elements” tab in the left sidebar and choose your favorite animated progress bar.",image:"https://cdn-useast1.kapwing.com/static/T2W-progressbarui.webp"},step3:{header:"Export and share",description:"Finish editing your video and export it to share on any platform.",image:"https://cdn-useast1.kapwing.com/static/mxQ-exportasmp4.webp"}},faq:[{question:"How do I add a progress bar to video online?",answer:"To add progress bars to videos online, creators use a browser-based software tool that generates an animated bar representing a video’s duration. This dynamic visual representation helps viewers see the progression of a video, forgoing the need to pause and check the time. Many online tools support this process, such as Kapwing. Kapwing allows creators to add progress bars to videos then change the style, bar color, outline color, and size online with any device."},{question:"How do you make an animated progress bar?",answer:"You can use a software tool to auto-generate an animated progress bar for your video. With a free tool like Kapwing, simply upload your audio file or paste a link, then add a progress bar that’s perfectly time to the exact duration of your video. Kapwing’s built-in tools also make it easy to customize the bar without previous video editing experience. You can change the color, style, size, and position to ensure the progress bar matches your content style."}],subfolderLinks:(0,d.E)("/tools/add-effects/progress-bar")};function l(){return(0,r.jsx)(i.ZP,{...c})}},63227:function(e,o,t){"use strict";var r,s;t.d(o,{p:function(){return r}}),(s=r||(r={})).AddAudio="add-audio",s.AddImage="add-image",s.AddSoundEffects="add-sound-effects",s.Adjust="adjust",s.AnimatedText="animatedText",s.AddBorder="add-border",s.AiVoiceCloning="aiVoiceCloning",s.Blur="blur",s.BlurVideoBackground="blurVideoBackground",s.BRollGenerator="bRollGenerator",s.Censor="censor",s.Collage="collage",s.ColorChanging="color-changing",s.CompressVideo="compressVideo",s.Convert="convert",s.Crop="crop",s.CustomEmoji="custom-emoji",s.Draw="draw",s.Dubbing="dubbing",s.Editor="editor",s.Extract="extract",s.Filter="filter",s.FreezeFrame="freeze-frame",s.GifMaker="gifMaker",s.Glitch="glitch",s.KenBurns="

1ken-burns",s.Keyframing="keyframing",s.Link="link",s.MemeMaker="memeMaker",s.MusicVideo="musicVideo",s.PersonasCreationFlow="personasCreationFlow",s.PersonasStockLibrary="personasStockLibrary",s.RemoveBackgroundNoiseWithElevenLabs="removeBackgroundNoiseWithElevenLabs",s.RemoveImageBackground="remove-image-background",s.RemoveVideoBackground="remove-video-background",s.SpeakerFocus="speakerFocus",s.Chromakey="chromakey",s.Podcast="podcast",s.ProgressBar="progressBar",s.RecordScreen="record-screen",s.Resize="resize",s.SafeZone="safe-zone",s.Speed="speed",s.SlowMotion="slowMotion",s.Subtitles="subtitles",s.Teleprompter="teleprompter",s.Text="text",s.Timeline="timeline",s.TextToSpeech="text-to-speech",s.Transitions="transitions",s.Translate="translate",s.TranslateSubtitles="translate-subtitles",s.TranslateImage="translate-image",s.TranslateAudio="translate-audio",s.TrimVideo="trim-video",s.TvStatic="tv-static",s.VideoStabilizer="video-stabilizer",s.YoutubeThumbnail="youtubeThumbnail",s.Rotate="rotate",s.AiScriptGenerator="aiScriptGenerator",s.AiVideoGenerator="aiVideoGenerator",s.AiImageGenerator="aiImageGenerator",s.AiDocumentToVideo="aiDocumentToVideo",s.AiArticleToVideo="aiArticleToVideo",s.AiScriptToVideoGenerator="aiScriptToVideoGenerator",s.Transcribe="transcribe",s.TrimWithTranscript="trimWithTranscript",s.VttFile="vttFile",s.SilenceRemover="silence-remover",s.SrtFile="srtFile",s.TrimAudio="trim-audio",s.Reverse="reverse",s.Pinning="pinning",s.Slideshow="slideshow",s.SrtEditor="srtEditor",s.Vhs="vhs",s.Volume="volume",s.Waveform="waveform",s.EnhanceImage="enhanceImage",s.EnhanceVoice="enhanceVoice",s.Generic="Generic",s.SplitVocals="splitVocals",s.SmartCut="smartCut",s.EyeContact="eyeContact",s.SplitVideo="splitVideo",s.SpeakerLabels="speakerLabels",s.KaiSoundEffects="kai-sound-effects",s.KaiFontGenerator="kai-font-generator",s.KaiCharacters="kai-characters"},77353:function(e){e.exports={"animate-gradient":"MoreContext_animate-gradient__3Fbej",gradient:"MoreContext_gradient__CqVXa",fadeIn:"MoreContext_fadeIn__WEnje","animate-pink-gradient":"MoreContext_animate-pink-gradient__Bgn7m",pinkGradient:"MoreContext_pinkGradient__goPNo","prevent-highlight":"MoreContext_prevent-highlight__ry2SF","no-select":"MoreContext_no-select__4_6iC",noselect:"MoreContext_noselect__P_6nL",wrapper:"MoreContext_wrapper__4Vmro",container:"MoreContext_container__xPfm7",left:"MoreContext_left__MaC1A",right:"MoreContext_right__mrIQ6",image:"MoreContext_image__Sc4Kz",video:"MoreContext_video__pSLLz",section:"MoreContext_section__zjBO_",selectedSection:"MoreContext_selectedSection__f9Crs",header:"MoreContext_header__eXKwz",description:"MoreContext_description__OrDEa",link:"MoreContext_link__9Mtc6"}},74795:function(e,o,t){"use strict";t.d(o,{Z:function(){return n}});var r=t(73732),s=e=>(0,r.isValidElement)(e)&&!!e.props.children;let a=e=>null==e||"boolean"==typeof e||"{}"===JSON.stringify(e)?"":e.toString(),i=e=>e instanceof Array||(0,r.isValidElement)(e)?r.Children.toArray(e).reduce((e,o)=>{let t="";return t=(0,r.isValidElement)(o)&&s(o)?i(o.props.children):(0,r.isValidElement)(o)&&!s(o)?"":a(o),e.concat(t)},""):a(e);var n=i}},function(e){e.O(0,[5842,8212,451,3442,872,9139,9914,3332,9228,7069,2611,6314,3317,4078,5736,122,9179,4915,7693,9774,2888,179],function(){return e(e.s=15388)}),_N_E=e.O()}]);