Create Cool Circular Music Player UI With Progress Bar Using CSS3 | Design Hunt #3

11 Feb , 2014  Design Inspirations,HTML & CSS,jQuery 

Sharing a design hunt inspiration on creating a cool circular music player UI with progress bar using CSS3. This cool music player is created by Rick using pure CSS3 and jQuery, who drew his inspiration from a Dribbble shot of this music player designed by Piotr Kwiatkowski. Piotr is a UI designer from Manchester and he designs for Mobile, web and desktop.

Cool Music Player UI With CSS3 and jQuery

Words from the designer

My biggest accomplishment with this was the scrub animation. I knew I could just animate a rotation to get the effect but the hard part was figuring out how to only get it to appear in the area that has been scrubbed. If 1/2 of it’s diameter was hidden it’d have been a lot easier, but with only 1/3 of it being hidden I finally came up with the idea to just animate each single border from transparent to colored as it rotates. Pretty simple idea but it gave me the most trouble to come up with.

I changed the “download tab” to a “star tab”, but what I really want to do is remove the “tab” all together and put a volume control in that area. I have yet to figure out a design for the volume control though.

I had to use a seperate div for the background circles instead of ::after pseudos because I ran into z-index problems with the .star-tab needing to be on the bottom layer.

What inspired us?

We are very much inspired by the way the dribble shot is exactly replicated in CSS3. We love the scrubber running along the music player. We also loved the toggle button on the UI. We just love the complete music player UI using CSS3.

The coding behind the working of this cool music player UI using CSS3: 

HTML

CSS3

jQuery

Details of the creation

Designer on the Dribbble ShotPiotr Kwiatkowski

Designer of the cool music player UI Using CSS3 and jQueryRick

Inspired from the Dribbble shot: Dribble Player Widget by Piotr

Coding: HTML5, CSS3, jQuery

Plugin: jQuery

Fonts Used: FontAwesome

Browser Support: Chrome, Firefox(looks best on Firefox)

DEMO | DOWNLOAD SOURCE

Hope you enjoyed this design inspiration. We will hunt for more such resources and share with you guys. Stay tuned for more design hunts.



, , , , ,

Comments are closed.