Scratch

I can't post code since I'm on my phone, but for the button use a background image.
For the progress bar, use background colors and sizes of two different HTML elements.

Use <progress> for the loading bar.

nXIII wrote:

Use <progress> for the loading bar.

You can But i'm trying to make a player using JS.And anyway this html5 page is Designed for 3DS and iOS

Devloper123 wrote:

Can you post code using your computer/laptop?

Ok, back on my laptop.

Button
CSS

#button {
  background-image: url('images/button.png');
}

Obviously you'll need to change that to your liking.
HTML

<button id="button">MyTextHere</button>

You can use any type of button you like, just set the id to button.

Progress Bar
(I'm going to do this in HTML4)
JS

function setProgressBar(percentage) {
  percentage = percentage/100;
  var progress = document.getElementById('progress');
  var progressBar = document.getElementById('progressBar');
  progress.style.width = (percentage*parseInt(progressBar.style.width))+"px";
}

CSS

#progress {
  width: 0px;
  height: 14px;
  background-color: blue;
}

#progressBar {
  width: 100px;
  height: 16px;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

Also change to your liking.

HTML

<div id="progressBar"><span id="progress" /></div>

I might have gotten my syntax a little messed up since I haven't tested it, but try it.