Skip to content

Instantly share code, notes, and snippets.

@pa-ulander

pa-ulander/index.html

Created June 14, 2016 14:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pa-ulander/b6150e25dd7e6d30cf910b477716cdc9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pa-ulander/b6150e25dd7e6d30cf910b477716cdc9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. pa-ulander created this gist Jun 14, 2016.
    38 changes: 38 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    <!DOCTYPE html>
    <html>
    <body>
    <style>
    progress {
    background-color: #f3f3f3;
    border: 0;
    width: 50%;
    height: 8px;
    border-radius: 5px;
    }
    progress::-webkit-progress-bar {
    background-color: #f0f0f0;
    border-radius: 5px;
    }
    progress::-webkit-progress-value {
    background: #c1c1c1;
    background: -moz-linear-gradient(top, #c1c1c1 0%, #d1d1d1 100%);
    background: -webkit-linear-gradient(top, #c1c1c1 0%,#d1d1d1 100%);
    background: linear-gradient(to bottom, #c1c1c1 0%,#d1d1d1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#d1d1d1',GradientType=0 );
    border-radius: 5px;
    }
    </style>

    <progress id='pb' max='1000'></progress>

    <script type="text/javascript">
    var pBar = document.getElementById('pb');
    setInterval(function() {
    updateProgress(1);
    }, 10);
    var updateProgress = function(value) {
    pBar.value += value;
    }
    </script>
    </body>
    </html>