发表新帖
发表新帖

How to make a progress bar

后端 未结
关注
19 1485
失恋的感觉
失恋的感觉 2020-12-04 18:09

How would one go about making a progress bar in html/css/javascript. I don\'t really want to use Flash. Something along the lines of what can be found here: http://dustincur

相关标签:
19条回答
  • 鱼传尺愫
    2020-12-04 18:29

    I know the following doesn't work currently because browsers do not support it yet, but maybe some day this will help:

    At the time of this post attr() on other properties than content is just a Candidate Recommendation1. As soon as it is implemented, one could create a progress bar with just one element (like the HTML 5 <progress/>, but with better styling options and text inside)

    <div class="bar" data-value="60"></div>

    and pure CSS

    .bar {
    position: relative;
    width: 250px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #003458;
    color: white;
}

.bar:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    width: attr(data-value %, 0); /* currently not supported */
    content: '';
    background: rgba(255, 255, 255, 0.3);
}

.bar:after {
    content: attr(data-value) "%";
}

    Here is the currently not working demo.

    1 Cannot imagine why this isn't implemented in any browser. First I'd think that if you have the functionality for content already, it should not be too hard to extend that (but of course I don't really know to be honest). Second: The above is just one good example showing how powerful this functionality could be. Hopefully they start to support it soon, or it won't even be part of the final specification.

    0 讨论(0)
  • 盖世英雄少女心
    2020-12-04 18:32

    You can create a progress-bar of any html element that you can set a gradient to. (Pretty cool!) In the sample below, the background of an HTML element is updated with a linear gradient with JavaScript:

    myElement.style.background = "linear-gradient(to right, #57c2c1 " + percentage + "%, #4a4a52 " + percentage + "%)";

    PS I have set both locations percentage the same to create a hard line. Play with the design, you can even add a border to get that classic progress-bar look :)

    https://jsfiddle.net/uoL8j147/1/

    0 讨论(0)
  • 萌比男神i
    2020-12-04 18:32 

    <html>
<style>
#myProgress {
  width: 100%;
  background-color: #ffffd;
}

#myBar {
  width: 10%;
  height: 15px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 15px;
  color: white;
}
</style>
<body onload="move()">

<div id="myProgress">
  <div id="myBar">10%</div>
</div>

<script>
var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width  + "%";
      }
    }
  }
}
</script>

</body>
</html>

    0 讨论(0)
  • 故里飘歌
    2020-12-04 18:33

    If you are using HTML5 its better to make use of <progress> tag which was newly introduced.

    <progress value="22" max="100"></progress>

    Or create a progress bar of your own.

    Example written in sencha

    if (!this.popup) {
            this.popup = new Ext.Panel({
            floating: true,
            modal: false,
            // centered:true,
            style:'background:black;opacity:0.6;margin-top:330px;',
            width: '100%',
            height: '20%',
            styleHtmlContent: true,
            html: '<p align="center" style="color:#FFFFFF;font-size:12px">Downloading Data<hr noshade="noshade"size="7" style="color:#FFFFFF"></p>',

            });
}
this.popup.show('pop');
    0 讨论(0)
  • 我在风中等你
    2020-12-04 18:34

    I used this progress bar. For more information on this you can go through this link i.e customization, coding etc.

    <script type="text/javascript">

var myProgressBar = null
var timerId = null

function loadProgressBar(){
myProgressBar = new ProgressBar("my_progress_bar_1",{
    borderRadius: 10,
    width: 300,
    height: 20,
    maxValue: 100,
    labelText: "Loaded in {value,0} %",
    orientation: ProgressBar.Orientation.Horizontal,
    direction: ProgressBar.Direction.LeftToRight,
    animationStyle: ProgressBar.AnimationStyle.LeftToRight1,
    animationSpeed: 1.5,
    imageUrl: 'images/v_fg12.png',
    backgroundUrl: 'images/h_bg2.png',
    markerUrl: 'images/marker2.png'
});

timerId = window.setInterval(function() {
    if (myProgressBar.value >= myProgressBar.maxValue)
        myProgressBar.setValue(0);
    else
        myProgressBar.setValue(myProgressBar.value+1);

},
100);
}

loadProgressBar();
</script>

    Hope this may be helpful to somenone.

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-04 18:37

    I tried a simple progress bar. It is not clickable just displays the actual percentage. There's a good explication and code here: http://ruwix.com/simple-javascript-html-css-slider-progress-bar/

    0 讨论(0)
 看不清?
提交回复
热议问题