Collection of hand-picked free Vue progress bar code examples. Update of January 2020 collection. 4 new items.

Related Articles:

  1. CSS Progress Bars
  2. Bootstrap Progress Bars
  3. JavaScript Progress Bars
  4. React Progress Bars
  5. jQuery Progress Bars

Author

  • Daryn St. Pierre

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Doom Eternal Inspired Health Bar

Somewhat inspired by the health and shield bars in DOOM Eternal. Drag the slider to adjust and see the varying levels of health.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: vue.js, gsap.js

Author

  • Jase

Made with

  • HTML / CSS (SCSS) / JS

About a code

Arc Progress Concept - with Vue.js and SVG

Count down? Count up? Progress? Just playing with an idea using SVG arcs and data controls with Vue.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: vue.js

Author

  • Sergej Atamantschuk Sergej Atamantschuk

About a code

Vue Ellipse Progress

A Vue.js component to create beautiful animated circular progress bars.

Demo image: Vue Read Progress

Author

  • Alberto Jerez

About a code

Vue Read Progress

Customizable progress bar at the top of the page that shows the scroll progress.

Demo image: Vue Scroll Progress Bar

Author

  • Guillaume Briday

About a code

Vue Scroll Progress Bar

Vue.js plugin for page scroll progress bar.

Demo image: Vue Circle Counter

Author

  • Roy Prins

About a code

Vue Circle Counter

This Vue component creates a circular counter. The angle, colors, strokewidth, spacing between dashes and direction can all be controlled through properties.

Demo image: Vue Scroll Progress

Author

  • Hyouk Seo

About a code

Vue Scroll Progress

Page scroll progress bar component for Vuejs.

Author

  • Lars M

About a code

VueJS Progress Bar

Vue.js progress bar.

Demo image: Vue Progress Scroll

Author

  • Hosein

About a code

Vue Progress Scroll

Tiny Vue plugin to show a progress bar while user is reading an article or ...

Demo image: Vue Simple Progress

Author

  • Dave Williams

About a code

Vue Simple Progress

A simple, flexible progress bar for Vue.js.

Demo image: Vue Progress Path

Author

  • Guillaume Chau

About a code

Vue Progress Path

Progress bars and loading indicators for Vue.js

Author

  • Wyzant

About a code

Vue Radial Progress

A radial progress bar component for Vue.js. Uses SVG and javascript to animate a radial progress bar with a gradient.

Demo image: Vue Top Progress

Author

  • wangjingchao

About a code

Vue Top Progress

Yet another top progress loading bar component for Vue.js.

Demo image: Vue Progressbar

Author

  • Awe

About a code

Vue Progressbar

A lightweight progress bar for VueJS.