React Progress Bars:

Circular Progress Bar for Music Player using React

Using different kinds of progress bars allows you to change the design of your website easily. The Circular Progress Bar for Music Player using React is one of the most attractive codes that you can use on your website to change its appearance. If your website is about music and playlists, this Music Player Progress Bar is a great idea for changing its appearance. So, you can download and apply this beautiful Progress Bar Code on your website to attract new audiences and engage your older viewers.

We have provided a preview of this Progress Bar Around Image to display its performance. If you look at this preview, you can realize that the following React Circular Progress Bar has a red theme, and you can use it if you have a colorful website. There are three circles in the middle of the page representing music with their images. You can see a pause button in the center of each image of the Rounded Progress Bar Code. When you choose any music, its related song will be by plaid, and its image will be larger. While playing your considered music, the duration of the song will be represented with a yellow line around the circle.

Music Player Progress Bar

Progress Bar Code

React Circular Progress Bar

Progress Bar Around Image

Rounded Progress Bar Code

<!-- This script got from frontendfreecode.com -->
<div id="app"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

* {
	box-sizing: border-box;
}
html {
	font-family: "Roboto", sans-serif;
}
img {
	vertical-align: middle;
	max-width: 100%;
}
.player {
	background: #d13741 url(http://frontendfreecode.com/img/red-bg.jpg) fixed center/cover;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}
.player__title {
	font-size: 2em;
	color: white;
	margin-bottom: 7.5rem;
}
.player__wave {
	position: absolute;
	top: calc(50% + 3.75rem);
	left: 0;
	transform: translateY(-50%);
}
.player__items {
	max-width: 73.75rem;
	width: 80%;
	display: flex;
	justify-content: space-between;
}
.audio-bubble {
	width: 15%;
	margin: 0;
	min-width: 8rem;
}
.audio-bubble--active .audio-bubble__button {
	transform: scale(2);
}
.audio-bubble__button {
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	background: black;
	border-radius: 50%;
	cursor: pointer;
	outline: 0;
	border: 1px solid #AB2E36;
	border-radius: 50%;
	padding: 0;
	padding: 0;
	position: relative;
	margin-bottom: 1.5rem;
}
.audio-bubble__image {
	border-radius: 50%;
	transition: opacity 0.4s ease;
}
.audio-bubble:not(.audio-bubble--active):hover .audio-bubble__image {
	opacity: 0.75;
}
.audio-bubble__meta {
	color: white;
	text-align: center;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.audio-bubble--active .audio-bubble__meta {
	transform: translateY(4.5rem);
}
.audio-bubble__progress {
	position: absolute;
	top: -3px;
	left: -3px;
	width: calc(100% + 6px);
	transform: rotate(-90deg);
}
.audio-bubble__progress circle {
	stroke: #fad258;
	stroke-dasharray: 608;
}
.audio-bubble:not(.audio-bubble--active) .audio-bubble__progress {
	opacity: 0;
}
.audio-bubble__play, .audio-bubble__pause {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.audio-bubble__play {
	width: 17.5%;
}
.audio-bubble__pause {
	width: 12%;
}
.audio-bubble__title {
	font-weight: bold;
	margin-bottom: 0.375rem;
}
.audio-bubble__subtitle {
	font-size: 0.875em;
}

const AUDIO = [
{
  title: 'In The Long Run',
  subtitle: 'Port Isla',
  image: 'http://frontendfreecode.com/img/thumb.jpg',
        audio: 'http://frontendfreecode.com/codes/files/audio.m4a' },
{
  title: 'Lament',
  subtitle: 'Piers Olenski',
  image: 'http://frontendfreecode.com/img/thumb-1.jpg',
    audio: 'http://frontendfreecode.com/codes/files/audio-1.mp3' },
{
  title: 'Beach Ball Dinner',
  subtitle: 'Man Bro Dude',
  image: 'http://frontendfreecode.com/img/thumb-2.jpg',
    audio: 'http://frontendfreecode.com/codes/files/audio-2.mp3' }];
class AudioBubble extends React.Component {
  constructor(props) {
    super();
    this.state = {
      strokeDashoffset: null };
  }
  componentDidMount() {
    this.$audio.addEventListener('loadedmetadata', () => {
      this.duration = this.$audio.duration;
    });
    this.pathLength = this.$progress.getTotalLength();
    this.setState({
      strokeDashoffset: this.pathLength });
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.active) {
      const progressUpdater = () => {
        this.updateProgressBar();
        this.progressLoop = requestAnimationFrame(progressUpdater);
      };
      this.$audio.play();
      this.progressLoop = requestAnimationFrame(progressUpdater);
      this.$audio.addEventListener('ended', this.props.onComplete);
    } else {
      cancelAnimationFrame(this.progressLoop);
      this.$audio.addEventListener('ended', this.props.onComplete);
      this.$audio.pause();
      this.$audio.currentTime = 0;
      this.setState({
        strokeDashoffset: this.pathLength });
    }
  }
  updateProgressBar() {
    const currentTime = this.$audio.currentTime;
    const percentage = currentTime / this.duration;
    const strokeDashoffset = percentage * this.pathLength;
    this.setState({
      strokeDashoffset: this.pathLength - strokeDashoffset });
  }
  handleClick() {
    this.props.setActive();
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("figure", {
        className: classNames(
        'audio-bubble',
        { 'audio-bubble--active': this.props.active }) }, /*#__PURE__*/
      React.createElement("audio", {
        src: this.props.audio,
        ref: ref => {this.$audio = ref;} }), /*#__PURE__*/
      React.createElement("button", {
        onClick: this.handleClick.bind(this),
        className: "audio-bubble__button" }, /*#__PURE__*/
      React.createElement("svg", {
        viewBox: "0 0 200 200",
        className: "audio-bubble__progress",
        xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/
      React.createElement("circle", {
        cx: "100",
        cy: "100",
        r: "97",
        strokeWidth: "3",
        fill: "none",
        ref: ref => {this.$progress = ref;},
        style: { strokeDashoffset: this.state.strokeDashoffset } })), /*#__PURE__*/
      React.createElement("img", {
        className: "audio-bubble__image",
        src: this.props.image,
        alt: this.props.title }),
      !this.props.active && /*#__PURE__*/
      React.createElement("svg", { className: "audio-bubble__play", viewBox: "0 0 109.4 124.5" }, /*#__PURE__*/
      React.createElement("path", {
        fill: "#fff",
        d: "M106.4 57L9 .8C5-1.5 0 1.4 0 6v112.5c0 4.6 5 7.5 9 5.2l97.4-56.2c4-2.4 4-8.2 0-10.5z" })),
      this.props.active && /*#__PURE__*/
      React.createElement("svg", { className: "audio-bubble__pause", viewBox: "0 0 120.2 124.5" }, /*#__PURE__*/
      React.createElement("path", {
        fill: "#fff",
        d: "M114.2 124.5c3.3 0 6-2.7 6-6V6c0-3.3-2.7-6-6-6h-36c-3.3 0-6 2.7-6 6v112.5c0 3.3 2.7 6 6 6h36zM42 124.5c3.3 0 6-2.7 6-6V6c0-3.3-2.7-6-6-6H6C2.7 0 0 2.7 0 6v112.5c0 3.3 2.7 6 6 6h36z" }))), /*#__PURE__*/
      React.createElement("figcaption", { className: "audio-bubble__meta" }, /*#__PURE__*/
      React.createElement("h1", { className: "audio-bubble__title" }, this.props.title), /*#__PURE__*/
      React.createElement("h2", { className: "audio-bubble__subtitle" }, this.props.subtitle))));
  }}
class Player extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeIndex: null };
  }
  onComplete() {
    this.setState({
      activeIndex: null });
  }
  setActive(i) {
    const index = i === this.state.activeIndex ? null : i;
    this.setState({
      activeIndex: index });
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "player" }, /*#__PURE__*/
      React.createElement("svg", { className: "player__wave", viewBox: "0 0 1354 128.8" }, /*#__PURE__*/
      React.createElement("path", {
        fill: "none",
        stroke: "#ab2e36",
        d: "M.3 29.9c41.3-9.3 110.6-22.7 197-27 354.8-17.8 514.5 140.6 813 123 78.5-4.6 198.1-23.3 343-96",
        strokeWidth: "3",
        strokeMiterlimit: "10" })), /*#__PURE__*/
      React.createElement("h1", { className: "player__title" }, "New releases"), /*#__PURE__*/
      React.createElement("div", { className: "player__items" },
      AUDIO.map((audio, i) => /*#__PURE__*/
      React.createElement(AudioBubble, {
        active: this.state.activeIndex === i,
        key: audio.title,
        title: audio.title,
        subtitle: audio.subtitle,
        image: audio.image,
        audio: audio.audio,
        setActive: this.setActive.bind(this, i),
        onComplete: this.onComplete.bind(this) })))));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(Player, null), document.getElementById('app'));

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js'></script>
<style>
* {
	box-sizing: border-box;
}
html {
	font-family: "Roboto", sans-serif;
}
img {
	vertical-align: middle;
	max-width: 100%;
}
.player {
	background: #d13741 url(http://frontendfreecode.com/img/red-bg.jpg) fixed center/cover;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}
.player__title {
	font-size: 2em;
	color: white;
	margin-bottom: 7.5rem;
}
.player__wave {
	position: absolute;
	top: calc(50% + 3.75rem);
	left: 0;
	transform: translateY(-50%);
}
.player__items {
	max-width: 73.75rem;
	width: 80%;
	display: flex;
	justify-content: space-between;
}
.audio-bubble {
	width: 15%;
	margin: 0;
	min-width: 8rem;
}
.audio-bubble--active .audio-bubble__button {
	transform: scale(2);
}
.audio-bubble__button {
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	background: black;
	border-radius: 50%;
	cursor: pointer;
	outline: 0;
	border: 1px solid #AB2E36;
	border-radius: 50%;
	padding: 0;
	padding: 0;
	position: relative;
	margin-bottom: 1.5rem;
}
.audio-bubble__image {
	border-radius: 50%;
	transition: opacity 0.4s ease;
}
.audio-bubble:not(.audio-bubble--active):hover .audio-bubble__image {
	opacity: 0.75;
}
.audio-bubble__meta {
	color: white;
	text-align: center;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.audio-bubble--active .audio-bubble__meta {
	transform: translateY(4.5rem);
}
.audio-bubble__progress {
	position: absolute;
	top: -3px;
	left: -3px;
	width: calc(100% + 6px);
	transform: rotate(-90deg);
}
.audio-bubble__progress circle {
	stroke: #fad258;
	stroke-dasharray: 608;
}
.audio-bubble:not(.audio-bubble--active) .audio-bubble__progress {
	opacity: 0;
}
.audio-bubble__play, .audio-bubble__pause {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.audio-bubble__play {
	width: 17.5%;
}
.audio-bubble__pause {
	width: 12%;
}
.audio-bubble__title {
	font-weight: bold;
	margin-bottom: 0.375rem;
}
.audio-bubble__subtitle {
	font-size: 0.875em;
}
</style>

</head>
<body>
<div id="app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const AUDIO = [
{
  title: 'In The Long Run',
  subtitle: 'Port Isla',
  image: 'http://frontendfreecode.com/img/thumb.jpg',
        audio: 'http://frontendfreecode.com/codes/files/audio.m4a' },
{
  title: 'Lament',
  subtitle: 'Piers Olenski',
  image: 'http://frontendfreecode.com/img/thumb-1.jpg',
    audio: 'http://frontendfreecode.com/codes/files/audio-1.mp3' },
{
  title: 'Beach Ball Dinner',
  subtitle: 'Man Bro Dude',
  image: 'http://frontendfreecode.com/img/thumb-2.jpg',
    audio: 'http://frontendfreecode.com/codes/files/audio-2.mp3' }];
class AudioBubble extends React.Component {
  constructor(props) {
    super();
    this.state = {
      strokeDashoffset: null };
  }
  componentDidMount() {
    this.$audio.addEventListener('loadedmetadata', () => {
      this.duration = this.$audio.duration;
    });
    this.pathLength = this.$progress.getTotalLength();
    this.setState({
      strokeDashoffset: this.pathLength });
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.active) {
      const progressUpdater = () => {
        this.updateProgressBar();
        this.progressLoop = requestAnimationFrame(progressUpdater);
      };
      this.$audio.play();
      this.progressLoop = requestAnimationFrame(progressUpdater);
      this.$audio.addEventListener('ended', this.props.onComplete);
    } else {
      cancelAnimationFrame(this.progressLoop);
      this.$audio.addEventListener('ended', this.props.onComplete);
      this.$audio.pause();
      this.$audio.currentTime = 0;
      this.setState({
        strokeDashoffset: this.pathLength });
    }
  }
  updateProgressBar() {
    const currentTime = this.$audio.currentTime;
    const percentage = currentTime / this.duration;
    const strokeDashoffset = percentage * this.pathLength;
    this.setState({
      strokeDashoffset: this.pathLength - strokeDashoffset });
  }
  handleClick() {
    this.props.setActive();
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("figure", {
        className: classNames(
        'audio-bubble',
        { 'audio-bubble--active': this.props.active }) }, /*#__PURE__*/
      React.createElement("audio", {
        src: this.props.audio,
        ref: ref => {this.$audio = ref;} }), /*#__PURE__*/
      React.createElement("button", {
        onClick: this.handleClick.bind(this),
        className: "audio-bubble__button" }, /*#__PURE__*/
      React.createElement("svg", {
        viewBox: "0 0 200 200",
        className: "audio-bubble__progress",
        xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/
      React.createElement("circle", {
        cx: "100",
        cy: "100",
        r: "97",
        strokeWidth: "3",
        fill: "none",
        ref: ref => {this.$progress = ref;},
        style: { strokeDashoffset: this.state.strokeDashoffset } })), /*#__PURE__*/
      React.createElement("img", {
        className: "audio-bubble__image",
        src: this.props.image,
        alt: this.props.title }),
      !this.props.active && /*#__PURE__*/
      React.createElement("svg", { className: "audio-bubble__play", viewBox: "0 0 109.4 124.5" }, /*#__PURE__*/
      React.createElement("path", {
        fill: "#fff",
        d: "M106.4 57L9 .8C5-1.5 0 1.4 0 6v112.5c0 4.6 5 7.5 9 5.2l97.4-56.2c4-2.4 4-8.2 0-10.5z" })),
      this.props.active && /*#__PURE__*/
      React.createElement("svg", { className: "audio-bubble__pause", viewBox: "0 0 120.2 124.5" }, /*#__PURE__*/
      React.createElement("path", {
        fill: "#fff",
        d: "M114.2 124.5c3.3 0 6-2.7 6-6V6c0-3.3-2.7-6-6-6h-36c-3.3 0-6 2.7-6 6v112.5c0 3.3 2.7 6 6 6h36zM42 124.5c3.3 0 6-2.7 6-6V6c0-3.3-2.7-6-6-6H6C2.7 0 0 2.7 0 6v112.5c0 3.3 2.7 6 6 6h36z" }))), /*#__PURE__*/
      React.createElement("figcaption", { className: "audio-bubble__meta" }, /*#__PURE__*/
      React.createElement("h1", { className: "audio-bubble__title" }, this.props.title), /*#__PURE__*/
      React.createElement("h2", { className: "audio-bubble__subtitle" }, this.props.subtitle))));
  }}
class Player extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeIndex: null };
  }
  onComplete() {
    this.setState({
      activeIndex: null });
  }
  setActive(i) {
    const index = i === this.state.activeIndex ? null : i;
    this.setState({
      activeIndex: index });
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "player" }, /*#__PURE__*/
      React.createElement("svg", { className: "player__wave", viewBox: "0 0 1354 128.8" }, /*#__PURE__*/
      React.createElement("path", {
        fill: "none",
        stroke: "#ab2e36",
        d: "M.3 29.9c41.3-9.3 110.6-22.7 197-27 354.8-17.8 514.5 140.6 813 123 78.5-4.6 198.1-23.3 343-96",
        strokeWidth: "3",
        strokeMiterlimit: "10" })), /*#__PURE__*/
      React.createElement("h1", { className: "player__title" }, "New releases"), /*#__PURE__*/
      React.createElement("div", { className: "player__items" },
      AUDIO.map((audio, i) => /*#__PURE__*/
      React.createElement(AudioBubble, {
        active: this.state.activeIndex === i,
        key: audio.title,
        title: audio.title,
        subtitle: audio.subtitle,
        image: audio.image,
        audio: audio.audio,
        setActive: this.setActive.bind(this, i),
        onComplete: this.onComplete.bind(this) })))));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(Player, null), document.getElementById('app'));
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars