Here is the free code of Internet speed checker too written in HTML, Javascript and Css. By Using this tool you can test the speed of your internet with realtime testing .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpeedTest Checker Tool</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #4facfe, #00f2fe);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #333;
}
.container {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 90%;
max-width: 400px;
text-align: center;
}
.title {
font-size: 24px;
font-weight: bold;
color: #0078ff;
margin-bottom: 20px;
}
.speedometer {
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #00bfa6;
display: flex;
justify-content: center;
align-items: center;
margin: 20px auto;
font-size: 20px;
font-weight: bold;
color: #00bfa6;
}
.btn {
background: #0078ff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
.btn:hover {
background: #005bb5;
}
.details {
margin-top: 20px;
text-align: left;
}
.details div {
margin: 10px 0;
font-size: 14px;
}
.details span {
font-weight: bold;
}
@media (max-width: 600px) {
.title {
font-size: 20px;
}
.speedometer {
width: 80px;
height: 80px;
font-size: 16px;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/speedtest-net/1.0.0/speedtest-net.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">Internet Speed Test</div>
<div class="speedometer" id="speedometer">0 Mbps</div>
<button class="btn" onclick="startTest()">Start Test</button>
<div class="details" id="details">
<div>Download Speed: <span id="download">0 Mbps</span></div>
<div>Upload Speed: <span id="upload">0 Mbps</span></div>
<div>Ping: <span id="ping">0 ms</span></div>
</div>
</div>
<script>
function startTest() {
const speedometer = document.getElementById('speedometer');
const downloadElement = document.getElementById('download');
const uploadElement = document.getElementById('upload');
const pingElement = document.getElementById('ping');
// Fake data simulation (replace with actual library integration as needed)
let downloadSpeed = Math.random() * 100;
let uploadSpeed = Math.random() * 50;
let ping = Math.random() * 50;
speedometer.innerHTML = `${downloadSpeed.toFixed(2)} Mbps`;
downloadElement.innerHTML = `${downloadSpeed.toFixed(2)} Mbps`;
uploadElement.innerHTML = `${uploadSpeed.toFixed(2)} Mbps`;
pingElement.innerHTML = `${ping.toFixed(2)} ms`;
}
</script>
</body>
</html>