<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Musical Loader(by rsportfolio.com)</title>
<style>
:root {
--bg: #a97d35;
--accent: #3575a9;
--accent2: #a9355c; /* Rose Red */
--soft: #2e2006; /* Soft Beige */
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
display: grid;
place-items: center;
background-image: radial-gradient(#a97d35 10%, #d9b879, #d9b879);
font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial;
color: var(--soft);
}
.loader {
width: 220px;
height: 220px;
position: relative;
display: grid;
place-items: center;
}
/* Vinyl disc */
.disc {
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(
circle at 55% 45%,
rgba(189, 12, 12, 0.05),
transparent 12%
),
repeating-conic-gradient(
rgba(255, 255, 255, 0.05) 0 6deg,
transparent 6deg 12deg
),
linear-gradient(180deg, #2b2b2b, #1a1a1a);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
display: grid;
place-items: center;
animation: spin 1.6s linear infinite;
}
.disc::after {
content: "";
width: 26px;
height: 26px;
border-radius: 50%;
background: radial-gradient(
circle at 40% 35%,
var(--bg) 0 18%,
var(--soft) 20%,
transparent 40%
);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
/* Needle arm */
.needle {
position: absolute;
width: 100px;
height: 6px;
background: linear-gradient(90deg, #e2e8f0 0%, #94a3b8 100%);
right: 20px;
top: 40px;
transform-origin: left center;
transform: rotate(-20deg);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
animation: tap 1.6s ease-in-out infinite;
}
.needle::after {
content: "";
width: 18px;
height: 18px;
position: absolute;
background: var(--accent2);
border-radius: 50%;
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.08);
right: -10px;
top: -6px;
}
/* Equalizer bars */
.eq {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
gap: 6px;
align-items: end;
height: 64px;
width: 120px;
pointer-events: none;
}
.bar {
width: 14px;
background: linear-gradient(180deg, var(--accent), var(--accent2));
border-radius: 6px 6px 2px 2px;
}
.bar.b1 {
height: 28px;
animation: bar 0.9s ease-in-out infinite;
}
.bar.b2 {
height: 42px;
animation: bar 1.1s ease-in-out 0.1s infinite;
}
.bar.b3 {
height: 54px;
animation: bar 0.7s ease-in-out 0.2s infinite;
}
.bar.b4 {
height: 40px;
animation: bar 1s ease-in-out 0.05s infinite;
}
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Animations */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes tap {
0%,
100% {
transform: rotate(-22deg);
}
50% {
transform: rotate(-12deg);
}
}
@keyframes bar {
0% {
transform: scaleY(0.35);
}
50% {
transform: scaleY(1);
}
100% {
transform: scaleY(0.35);
}
}
@media (max-width: 420px) {
.loader {
width: 170px;
height: 170px;
}
.disc {
width: 110px;
height: 110px;
}
.eq {
width: 90px;
}
}
/* Play button */
#playBtn {
margin-top: 40px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 6px;
background: var(--soft);
color: white;
cursor: pointer;
display: none;
}
#playBtn:hover {
background: var(--accent2);
}
</style>
</head>
<body>
<div class="loader" role="status" aria-live="polite">
<div class="disc" aria-hidden="true"></div>
<div class="needle" aria-hidden="true"></div>
<!-- Equalizer -->
<div class="eq" aria-hidden="true">
<div class="bar b1"></div>
<div class="bar b2"></div>
<div class="bar b3"></div>
<div class="bar b4"></div>
</div>
<span class="sr-only">Loading... Playing Music</span>
<!-- Background Music -->
<audio id="bgMusic" autoplay loop>
<source src="music.mp3" type="audio/mp3" />
</audio>
<!-- Play Button -->
<button id="playBtn">▶ Play Music</button>
</div>
<script>
const audio = document.getElementById("bgMusic");
const playBtn = document.getElementById("playBtn");
window.addEventListener("load", () => {
audio.play().catch((err) => {
console.log("Autoplay blocked:", err);
playBtn.style.display = "inline-block"; // show button
});
});
playBtn.addEventListener("click", () => {
audio.play();
playBtn.style.display = "none"; // hide after playing
});
</script>
</body>
</html>