Advertisement
angryatti

Progressbar in JavaScript

Jun 4th, 2022 (edited)
286
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. "use strict"
  2.  
  3. document.querySelector("#gomb").addEventListener("click", (evt) => {
  4.  
  5.     mozgas()
  6.  
  7.     function mozgas() {
  8.  
  9.         const elem = document.getElementById("folyamatBar")
  10.         let width = 0
  11.         let id = setInterval(frame, 100)
  12.  
  13.        function frame() {
  14.             if (width == 100) {
  15.                 clearInterval(id)
  16.                 width = 0
  17.                 alert("Folyamat kész")
  18.             }
  19.  
  20.             else {
  21.  
  22.                 width++
  23.                 elem.style.width = width + '%'
  24.  
  25.             }
  26.  
  27.  
  28.         }
  29.  
  30.     }
  31.  
  32.  
  33.  
  34. })
  35.  
  36.   <!DOCTYPE html>
  37. <html lang="hu">
  38. <head>
  39.     <meta charset="UTF-8">
  40.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  41.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  42.     <title>Document</title>
  43. </head>
  44. <body>
  45.     <div id="folyamatJelzo">
  46.         <div id="folyamatBar" style="background-color: aqua; width: 10%;">
  47.  
  48.  
  49.         </div>
  50.     </div>
  51.  
  52.     <button type="button" class="btn btn-primary" id="gomb">Folyamat</button>
  53.  
  54.  
  55.     <script src="./asd.js">
  56.  
  57.     </script>
  58. </body>
  59. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement