Skip to content

Instantly share code, notes, and snippets.

@zyrouge

zyrouge/progress-bar.html

Created May 31, 2021 07:06
Show Gist options
  • Save zyrouge/26e6cdd3384ab43a77149b4c6eebeb38 to your computer and use it in GitHub Desktop.
Save zyrouge/26e6cdd3384ab43a77149b4c6eebeb38 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. zyrouge created this gist May 31, 2021.
    54 changes: 54 additions & 0 deletions progress-bar.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar</title>

    <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    <main>
    <div id="app">
    <div id="bar">
    <span id="progress" :style="{ width: `${value}%` }"></span>
    </div>
    </div>
    </main>

    <script defer>
    const app = Vue.createApp({
    data() {
    return {
    value: 0.0
    }
    },
    mounted() {
    setInterval(() => {
    this.value = this.value >= 100 ? 0 : this.value + 0.1;
    }, 10);
    }
    });

    app.mount("#app");
    </script>

    <style>
    #bar {
    background-color: rgb(223, 223, 223);
    width: 100%;
    height: 1rem;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    }

    #progress {
    position: absolute;
    height: 100%;
    background-color: #000;
    }
    </style>
    </body>
    </html>