HI Folks ,
Some times it may requires to display some progress bar or percentage bar that indicates the progress on the visual force page.
In order to satisfy this kind of requirements , we can go with HTML component & CSS support as there is no tag to display progress on Vf page.
Here is the is CSS that needs to be included in VF page in <style> Tag.
<style> progress, progress[role] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-size: auto; height: 15px; width: 100%; } .skill-list { list-style: none; margin: 0; padding: 1em; } .skill { margin-bottom: 1em; position: relative; } .skill h3 { color: #fff; left: 1em; line-height: 1; position: absolute; top: 1em; } .skill ::-webkit-progress-value { -webkit-animation: bar-fill 2s; width: 0px; } .skill-1::-webkit-progress-value { background: #1797c0; } .skill-1::-webkit-progress-bar { background: #ccc; } .skill-2::-webkit-progress-value { background: #1797c0; } .skill-2::-webkit-progress-bar { background: #ccc; } .skill-3::-webkit-progress-value { background: #1797c0; } .skill-3::-webkit-progress-bar { background: #ccc; } @-webkit-keyframes bar-fill { 0% { width: 0; } } @keyframes bar-fill { 0% { width: 0; } }
</style>
Here is the code that should be used on the VF page :
<progress class="skill-1" max="100" value="{!ICleanedAccPercentage}"> </progress>
The merge field indicates the percentage that reflect the graph .
Thank you.
Salesforce ROCKZ..
Haribabu Amudalapalli
Thanks for clarification..Haribabu Amudalapalli
ReplyDeleteWhat happens if the merge field is greater than max. Is there a way to add a marker for max value?
ReplyDelete