CSS only audio player UI

Developer
Niels Oeltjen
Size
3,325 Kb
Views
58,696
  1. CSS only audio player UI Previews
  2. CSS only audio player UI HTML Codes
  3. CSS only audio player UI CSS Codes

How do I make an css only audio player ui?

Streaming audio player animation using modern CSS animations, transforms etc.. What is a css only audio player ui? How do you make a css only audio player ui? This script and codes were developed by Niels Oeltjen on 03 September 2022, Saturday.

CSS only audio player UI Previews
IQ Test

CSS only audio player UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS only audio player UI</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* box model*/
* { -moz-box-sizing: border-box; box-sizing: border-box; box-sizing: border-box;
}
/* rotation */
@keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
@-moz-keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
@-ms-keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
@keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
/* pulse */
@keyframes pulse { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-moz-keyframes pulse { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-ms-keyframes pulse { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes pulse { 0% { opacity: 0; } 100% { opacity: 1; }
}
/* scale */
@keyframes scale { 0% { transform: scale(1.0); } 100% { transform: scale(1.2); }
}
@-moz-keyframes scale { 0% { transform: scale(1.0); } 100% { transform: scale(1.2); }
}
@-ms-keyframes scale { 0% { transform: scale(1.0); } 100% { transform: scale(1.2); }
}
@keyframes scale { 0% { transform: scale(1.0); } 100% { transform: scale(1.2); }
}
/* globals */
body { background-color: #E5DFDF;
}
.wrapper { position: relative; background-color: #E5DFDF; margin: 40px auto 0 auto; height: 480px; width: 320px;
}
.circle { /* Draw circles */ border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}
.animated { /* Smoother animations */ transform: translateZ(0);
}
/* tower */
.tower { position: absolute; top: 12.5%; width: 100%; margin: -20px 0 0 0;
}
.tower .signal { position: absolute; top: 0px; left: 50%; margin: 0 0 0 -15px;
}
.tower .signal .rings { width: 30px; height: 30px; border: 6px double #F2F0F0; animation: scale 1s infinite linear;
}
.tower .dot { margin: 10px auto 0 auto; width: 10px; height: 10px; background-color: #F2F0F0;
}
.tower .triangle { margin: -5px auto 0 auto; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #F2F0F0;
}
/* player */
.player { position: absolute; top: 50%; left: 50%; margin: -120px 0 0 -120px; height: 240px; width: 240px; background-color: #F2F0F0; cursor: pointer;
}
.player .triangle { position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin: -15px 0 0 -10px; border-top: 20px solid transparent; border-left: 30px solid #4BEADE; border-bottom: 20px solid transparent;
}
.player:hover .triangle { border-top: 20px solid transparent; border-left: 30px solid #46CCBF; border-bottom: 20px solid transparent;
}
.player .buffering { position: absolute; top: 5px; left: 5px; width: 230px; height: 230px; border-right: 2px solid #D3D1D1; border-bottom: 2px solid #D3D1D1; border-left: 2px solid #F2F0F0; border-top: 2px solid #F2F0F0; animation: rotate 3s infinite linear;
}
/* text */
.text { position: absolute; top: 85%; text-align: center; text-transform: uppercase; color: #C1B8B8; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; width: 100%; animation: pulse 1.3s infinite;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper">
<div class="tower"> <div class="signal"> <div class="rings circle animated"></div> </div> <div class="dot circle"></div> <div class="triangle"></div>
</div>
<div class="player circle"> <div class="buffering circle animated"></div> <div class="triangle"></div>
</div>
<div class="text"> <div class="pulsing animated">Buffering</div>
</div>
</div>
</body>
</html>

CSS only audio player UI - Script Codes CSS Codes

/* box model*/
* { -moz-box-sizing: border-box; box-sizing: border-box; box-sizing: border-box;
}
/* rotation */
@keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
@-moz-keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
@-ms-keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
@keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
/* pulse */
@keyframes pulse { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-moz-keyframes pulse { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-ms-keyframes pulse { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes pulse { 0% { opacity: 0; } 100% { opacity: 1; }
}
/* scale */
@keyframes scale { 0% { transform: scale(1.0); } 100% { transform: scale(1.2); }
}
@-moz-keyframes scale { 0% { transform: scale(1.0); } 100% { transform: scale(1.2); }
}
@-ms-keyframes scale { 0% { transform: scale(1.0); } 100% { transform: scale(1.2); }
}
@keyframes scale { 0% { transform: scale(1.0); } 100% { transform: scale(1.2); }
}
/* globals */
body { background-color: #E5DFDF;
}
.wrapper { position: relative; background-color: #E5DFDF; margin: 40px auto 0 auto; height: 480px; width: 320px;
}
.circle { /* Draw circles */ border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}
.animated { /* Smoother animations */ transform: translateZ(0);
}
/* tower */
.tower { position: absolute; top: 12.5%; width: 100%; margin: -20px 0 0 0;
}
.tower .signal { position: absolute; top: 0px; left: 50%; margin: 0 0 0 -15px;
}
.tower .signal .rings { width: 30px; height: 30px; border: 6px double #F2F0F0; animation: scale 1s infinite linear;
}
.tower .dot { margin: 10px auto 0 auto; width: 10px; height: 10px; background-color: #F2F0F0;
}
.tower .triangle { margin: -5px auto 0 auto; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #F2F0F0;
}
/* player */
.player { position: absolute; top: 50%; left: 50%; margin: -120px 0 0 -120px; height: 240px; width: 240px; background-color: #F2F0F0; cursor: pointer;
}
.player .triangle { position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin: -15px 0 0 -10px; border-top: 20px solid transparent; border-left: 30px solid #4BEADE; border-bottom: 20px solid transparent;
}
.player:hover .triangle { border-top: 20px solid transparent; border-left: 30px solid #46CCBF; border-bottom: 20px solid transparent;
}
.player .buffering { position: absolute; top: 5px; left: 5px; width: 230px; height: 230px; border-right: 2px solid #D3D1D1; border-bottom: 2px solid #D3D1D1; border-left: 2px solid #F2F0F0; border-top: 2px solid #F2F0F0; animation: rotate 3s infinite linear;
}
/* text */
.text { position: absolute; top: 85%; text-align: center; text-transform: uppercase; color: #C1B8B8; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; width: 100%; animation: pulse 1.3s infinite;
}
CSS only audio player UI - Script Codes
CSS only audio player UI - Script Codes
Home Page Home
Developer Niels Oeltjen
Username NielsOeltjen
Uploaded September 03, 2022
Rating 4.5
Size 3,325 Kb
Views 58,696
Do you need developer help for CSS only audio player UI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Niels Oeltjen (NielsOeltjen) Script Codes
Name
Rounded tabs
Loading animation
Sweet star loader
Animated background colours
Emoji selectors
Another nice loader
Nice outline hover effect
Animated css matrix type
Simple spinner
Layout states using jQuery and Data Attributes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!