Open schweigenderFlugel opened 1 month ago
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reading Progress Bar</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css"> <style> body { scroll-behavior: smooth; } #progress-bar-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background-color: var(--tw-bg-opacity); } #progress-bar { height: 100%; width: 0; background-color: #4caf50; transition: width 0.25s ease; } </style> </head> <body class="bg-gray-100 dark:bg-gray-800"> <div id="progress-bar-container" class="bg-gray-300 dark:bg-gray-700"> <div id="progress-bar"></div> </div> <div class="container mx-auto py-8"> <h1 class="text-3xl font-bold mb-4">Your Article Title</h1> <p class="mb-4">Your article content...</p> <p class="mb-4">Your article content...</p> <p class="mb-4">Your article content...</p> <!-- Añade más contenido para hacer scroll --> </div> <script> // JavaScript para actualizar la barra de progreso window.addEventListener('scroll', function() { const progressBar = document.getElementById('progress-bar'); const totalHeight = document.body.scrollHeight - window.innerHeight; const progress = (window.scrollY / totalHeight) * 100; progressBar.style.width = `${progress}%`; }); </script> </body> </html>