main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { createApp } from "vue"; import "./style.css"; import App from "./App.vue"; import VueScrollProgress from "vue-scroll-progress"; const app = createApp(App); app.use(VueScrollProgress); // Mount the app app.mount("#app"); |
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<template> <div id="app"> <!-- Progress Bar --> <VueScrollProgress /> <!-- Page Content --> <div class="content"> <h1>Understanding Vue.js</h1> <p> Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable and focuses on the view layer only, making it easy to integrate with other libraries or existing projects. </p> <div class="long-content"> <p>Scroll to learn more...</p> <p>Advantages of Vue:</p> <ul> <li>Lightweight and Fast</li> <li>Reactivity System</li> <li>Component-based Architecture</li> </ul> <p>Keep scrolling for additional content...</p> </div> </div> </div> </template> <script> export default { name: "App", }; </script> <style> /* Progress Bar Styling */ #progress-container-el { position: fixed; width: 100%; height: 5px; background-color: #ddd; z-index: 9999; top: 0; } #progress-el { height: 100%; background-color: #ff5722; transition: width 0.2s ease; } /* Content Styling */ .content { padding: 20px; font-family: Arial, sans-serif; } .long-content { height: 2000px; /* Content height to make it scrollable */ background: linear-gradient(white, #f9f9f9); } </style> |
