How to Create a VueJS Scroll Based Percent Bar - Day 14 - #100DaysOfCode

Показать описание

More VueJS! In this tutorial we create a Vue scroll-based percentage bar. As you scroll a post it shows you your progress made in a specific post.

Would you like to see one of the following frameworks in a tutorial? ReactJS, React Native, Angular, Cordova App Wrapper. Let me know if the comments.

The main language used in this video is JavaScript.

My Rig: MacBook Pro 13” 2015 + Additional 27” Dell monitor
My Text Editor: VSCode
My Theme: Google Material

Get the repo here…

Follow me on Twitter for upload updates…

Thanks for watching!

If you enjoyed leave a like.
If you want more than subscribe.
If you have any feedback drop it in the comments below!

#100DaysOfCode #100DaysOfCodeChallenge

Tyler Potts

Рекомендации по теме

Комментарии

<div class="fill" :style="{'left': this.percentage}">
and in the onScroll method add this
this.percentage = percent+'%'
style
left: 100%
right: 0%
with this, I could avoid adding the width through "for loop"

ahmadatef

When you were trying to keep it visible inside the element as you scrolled

bjni

You couldve done position: sticky, right?

bjni

How to Create a VueJS Scroll Based Percent Bar - Day 14 - #100DaysOfCode

Vue.js Explained in 100 Seconds

Creating Your First Vue 3 App with Vite - A Beginner's Tutorial

vue is the best web js framework, change my mind

Vue.js Tutorial: Beginner to Front-End Developer

Vue JS 3 Tutorial - 29 - Components

Vuejs Tutorial #8 - Vue Router

**✅ Build a To-Do App in Vue.js – Full Tutorial for Beginners 📝🚀**

Vue JS 3 Tutorial for Beginners #7 - Forms & Inputs

🚀Rediseñando la DB: Relaciones, Métodos y Arquitectura Escalable en Laravel & Vue.js - #11🔥...

How to make a blogging app in vuejs

How Vue.js as a web framework optimises rendering speed

Building a website FROM SCRATCH using Vue.js, HTML/CSS, and Netlify

Vuetify: Create an App with Vue JS - in 30 MINUTES!

Vue Router | Building single page applications

Ionic & Vue.js - Full Tutorial (Build a Complete App)

How to create a Vuejs project using Vue-CLI || Vuejs and Bootstrap #1

Build a Weather App in VueJS | Vue Beginner Tutorial

Vue JS 3 Tutorial for Beginners #8 - The Vue Router

VueJS, TailwindCSS & FrappeUI Training - Day 1 | DOM Manipulation & VueJS Basics

Build a Todo List App in Vue JS with LocalStorage in 2022 | Vue 3 for Beginners

Don't Use Inertia.js Do This Instead #vuejs #laravel #learntocode

Vue js create your own directives #shorts

Laravel and Vuejs project | Create a blog and forum from scratch #1

Create New page in Vue.js #vuejs

✅ Build a To-Do App in Vue.js – Full Tutorial for Beginners 📝🚀