Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Electron Projects

You're reading from   Electron Projects Build over 9 cross-platform desktop applications from scratch

Arrow left icon
Product type Paperback
Published in Nov 2019
Publisher Packt
ISBN-13 9781838552206
Length 436 pages
Edition 1st Edition
Languages
Arrow right icon
Authors (2):
Arrow left icon
Denys Vuika Denys Vuika
Author Profile Icon Denys Vuika
Denys Vuika
Philipp Langhans Philipp Langhans
Author Profile Icon Philipp Langhans
Philipp Langhans
Arrow right icon
View More author details
Toc

Table of Contents (12) Chapters Close

Preface 1. Building Your First Electron Application FREE CHAPTER 2. Building a Markdown Editor 3. Integrating with Angular, React, and Vue 4. Building a Screenshot Snipping Tool 5. Making a 2D Game 6. Building a Music Player 7. Analytics, Bug Tracking, and Licensing 8. Building a Group Chat Application with Firebase 9. Building an eBook Editor and Generator 10. Building a Digital Wallet for Desktops 11. Other Books You May Enjoy

Implementing a song progress bar

One of the traditional music components in any user interface is the progress element. The progress bar component usually displays the current position of the song that we're listening to. In this section, we are going to provide support for the HTML progress element and wire it with the Amplitude library.

In this case, you should be using the progress HTML element. It should be in the following format:

<progress class="amplitude-song-played-progress"></progress>

Let's create a separate div to hold our progress element. For the sake of simplicity, let's leave the style of the element as it is. You can always make it more beautiful later. Follow these steps to do so:

  1. Update the index.html file according to the following code:
<div class="controls">
<div class="amplitude-play-pause&quot...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image