A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format. Progress bar also uses for showing different scales of variations for several kind of website category.
Progress Bar egs:
https://www.freshdesignweb.com/jquery-css3-loading-progress-bar/http://tympanus.net/Development/ProgressButtonStyles/
Below is a sample HTML markup for the Progress Bar
This file contains 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
| <style> | |
| @-webkit-keyframes grow-width { | |
| from { | |
| width: 0; | |
| } | |
| } | |
| @keyframes grow-width { | |
| from { | |
| width: 0; | |
| } | |
| } | |
| body { | |
| font-family: "Open Sans", Arial; | |
| background: #EDEDED; | |
| } | |
| main { | |
| width: 720px; | |
| margin: 30px auto; | |
| padding: 10px 40px 30px; | |
| background: #FFF; | |
| overflow:hidden; | |
| } | |
| h1, h4 { | |
| text-align: center; | |
| color: #333; | |
| } | |
| p { | |
| font-size: 13px; | |
| } | |
| section { | |
| float:left; | |
| vertical-align: top; | |
| margin-top: 20px; | |
| } | |
| section:nth-of-type(odd) { | |
| margin-right: 20px; | |
| } | |
| .style-1 { | |
| list-style-type: none; | |
| padding: 0; | |
| width: 350px; | |
| } | |
| .style-1 li { | |
| position: relative; | |
| height: 50px; | |
| } | |
| .style-1 li em, .style-1 li span { | |
| display: block; | |
| border-bottom: 5px solid #EDEDED; | |
| padding-bottom: 5px; | |
| } | |
| .style-1 li em { | |
| font-style: normal; | |
| border-bottom-color: #b748f6; | |
| position: absolute; | |
| overflow: visible; | |
| -webkit-animation: grow-width 2s; | |
| animation: grow-width 2s; | |
| } | |
| .style-1 li span { | |
| text-align: right; | |
| } | |
| .style-2 { | |
| list-style-type: none; | |
| padding: 0; | |
| width: 350px; | |
| } | |
| .style-2 li { | |
| height: 50px; | |
| } | |
| .style-2 li em, .style-2 li span { | |
| padding: 5px 10px; | |
| } | |
| .style-2 li em { | |
| text-align: right; | |
| font-style: normal; | |
| float: left; | |
| width: 85px; | |
| } | |
| .style-2 li span { | |
| display: inline-block; | |
| background: #b748f6; | |
| overflow: visible; | |
| -webkit-animation: grow-width 2s; | |
| animation: grow-width 2s; | |
| } | |
| </style> |
This file contains 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
| <main> | |
| <section> | |
| <ul class="style-1"> | |
| <li> <em>Jquery</em><span>55</span></li> | |
| <li><em>Html</em><span>75</span></li> | |
| </ul> | |
| </section> | |
| <section> | |
| <ul class="style-2"> | |
| <li><em>Jquery</em> <span>453</span></li> | |
| <li><em>Html</em><span>956</span></li> | |
| </ul> | |
| </section> | |
| </main> |
This file contains 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
| <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> | |
| <script> | |
| function setBarWidth(dataElement, barElement, cssProperty, barPercent) { | |
| var listData = []; | |
| $(dataElement).each(function() { | |
| listData.push($(this).html()); | |
| }); | |
| var listMax = Math.max.apply(Math, listData); | |
| $(barElement).each(function(index) { | |
| $(this).css(cssProperty, (listData[index] / listMax) * barPercent + "%"); | |
| }); | |
| } | |
| setBarWidth(".style-1 span", ".style-1 em", "width", 80); | |
| setBarWidth(".style-2 span", ".style-2 span", "width", 55); | |
| </script> |
No comments :
Post a Comment