Created
September 7, 2015 04:03
-
-
Save thislooksfun/c8fbb655e98e284fc0ab to your computer and use it in GitHub Desktop.
Simple html5 / css3 / js progress bar example. Go nuts.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Progress bar testing</title> | |
| <style> | |
| body { | |
| background-color: #444; | |
| margin: 0 25%; | |
| } | |
| .bar_container { | |
| position: absolute; | |
| height: 50px; | |
| width: 50%; | |
| top: 100px; | |
| margin: 0 auto; | |
| background-color: #644; | |
| } | |
| .bar { | |
| position: relative; | |
| top: 4px; left: 4px; | |
| height: calc(100% - 8px); | |
| width: 0; | |
| background-color: #855; | |
| overflow: hidden; | |
| -webkit-transition: width 250ms linear; | |
| -moz-transition: width 250ms linear; | |
| -ms-transition: width 250ms linear; | |
| -o-transition: width 250ms linear; | |
| transition: width 250ms linear; | |
| } | |
| .percent_label { | |
| position: absolute; | |
| display: block; | |
| font-size: 40px; | |
| } | |
| .percent_label.outer { | |
| top: 4px; | |
| left: 8px; | |
| color: #ddd; | |
| } | |
| .percent_label.inner { | |
| top: 0px; | |
| left: 4px; | |
| color: #111; | |
| } | |
| </style> | |
| <script src="./jquery-2.1.3.min.js"></script> | |
| <script> | |
| function setPercent(bar, per) { | |
| var maxWidth = bar.parent().width() - 8 | |
| var width = maxWidth * (per / 100) | |
| bar.width(width) | |
| bar.parent().find(".percent_label").html(parseFloat(per).toFixed(1)+"%") | |
| } | |
| $(function() { | |
| var bars = $(".bar") | |
| bars.each(function(index, element) { | |
| var bar = $(element) | |
| var percent = bar.data("percent") | |
| if (percent == undefined || percent < 0) { | |
| percent = 0 | |
| } | |
| var auto = bar.data("auto") | |
| var rate = bar.data("rate") | |
| var incTime = bar.data("inctime") | |
| if ((auto != undefined && auto !== false) || (rate != undefined && rate > 0)) { | |
| if (rate == undefined || rate <= 0) { | |
| rate = 0.1 | |
| } | |
| if (incTime == undefined || incTime < 0) { | |
| incTime = 50 | |
| } | |
| var int = setInterval(function() { | |
| percent += rate | |
| if (percent >= 100) { | |
| percent = 100 | |
| clearInterval(int) | |
| } | |
| setPercent(bar, percent) | |
| }, incTime) | |
| } | |
| setPercent(bar, percent) | |
| }) | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <div class="bar_container"> | |
| <span class="percent_label outer"></span> | |
| <div class="bar" data-percent="0" data-rate="5" data-inctime="2000"> | |
| <span class="percent_label inner"></span> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment