Hello There, Guest! Login Register


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
how to make a process bar?
#1
Does anyone knows how to make a process bar in html,php,css,js?
please reply.
Reply
#2
Process bar? I'm afraid I'm not sure what you are talking about. Care to elaborate?
Questions, Comments, or Suggestions? PM me
These are the rules Please read them.
My tip jar: 1FqukbmrZf2EnnKYf3BkioWTYysqnynFWy
[Ex-Mod]
Reply
#3

.html   test2.html (Size: 1.75 KB / Downloads: 2)
.html   test2.html (Size: 1.75 KB / Downloads: 2) I'll understand what you meant progress bar.

I've been working on it for my project and you can simply ctrl + c | ctr + v in an .html file blank and edit as you wish.

Code:
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
 <audio id="mp3" oncanplay="play()" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1715/the_xx_-_intro.mp3"></audio>
 <div class="player">
   <div class="play-bar"><div class="played"><div class="play-circle"></div></div></div>
   <div class="time"></div>
 </div>

<script>
mp3 = $("#mp3") //get the object
$('#mp3').on('timeupdate', function() {
 progress = this.currentTime / this.duration * 100; //catch how much percent is complete
 $(".played").css("width",progress+"%")//if is 30% complete, the div width will be 30%
 time = cathTime(Math.round(this.duration - this.currentTime))
 $(".time").html(time);
});

function cathTime(s) {
 var m = Math.floor(s/60); //Get remaining minutes
 s -= m*60;
 return (m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s); //zero padding on minutes and seconds
}
</script>

<style>
html, body {
 font-family: "Roboto", Roboto-Regular;
 overflow: hidden;
 background-color: black;
 }
.player{
 position: absolute;
 width: 100%;
 height: 50px;
 bottom: 0px;
 background-color: rgba(0, 0, 0, 0.85);
 border-radius: 0px 0px 5px 5px;
}
.play-bar{
 position: relative;
 background-color: rgba(255, 255, 255, 0.1);;
 margin: auto;
 top: 17.5px;
 width: 50%;
 height: 15px;
 border-radius: 20px;
}
.played{
 position: absolute;
 width: 0%;
 height: 100%;
 background-color: white;
 border-radius: 20px;
}
.play-circle{
 position: absolute;
 background-color: white;
 right: -10;
 top: -4px;
 width: 22px;
 height: 22px;
 border-radius: 11px;
 box-shadow: -1px -2px 20px 2px black;
}
.time{
 color: white;
 position: absolute;
 font-size: 20px;
 right: 30px;
 top: 15px;
}
</style>
__                    
|_  _ |_  o  _ |      
|  (_||_) | (_)|__|_|><


If you enjoyed, please give me your like (:
Reply
#4
This is a very nice tutorial to go with, check it out if you still need help.
https://www.youtube.com/watch?v=Sddy2A2Olik
Reply
#5
Use bootstrap for process bars..Go to w3schools tutorials..I use w3schools, its best site and codecademy too.
Thanks for the instant vps Freedomain.club.. Loved this great service. Smile
Reply


Forum Jump:


Users browsing this thread:
1 Guest(s)