Home
Brandon D
Speedometer Example

Speedometer Example

Internet speed meter, gauge meter

This tailwind example is contributed by Brandon D, on 09-Aug-2022. Component is made with Tailwind CSS v3. It is responsive.

Widget

Author Brandon D

14.6k

Fork Fullscreen

<div class="min-h-screen items-center flex justify-center p-6">
    <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden border-r">
        <div class="block px-4 py-2 mb-6 leading-normal bg-grey-lighter flex flex-no-shrink">
            <h3 class="pl-2 text-left m-auto align-middle text-grey-darkest w-full">Internet Speedometer</h3>
            <button onClick="refreshSpeedOMeter();" class="bg-grey-light float-right hover:bg-grey text-grey-darkest font-bold py-3 px-3 rounded-full inline-flex items-center">
                <svg class="fill-current w-6 h-6 flex-no-shrink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42 1.42zM12 10h8l-4 4-4-4z"/></svg>
            </button>
        </div>

<div id="counter" class="text-grey-darkest text-center text-base font-semibold pt-4 pb-0">0.0 Mbps</div>
            </div>
        </div>
        <div class="px-6 pt-0 pb-4 text-center">
            <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2" id="effectiveType">-</span>
            <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2" id="rtt">rtt</span>
        </div>
        <div class="py-4 px-8 text-sm font-medium text-grey-darker bg-grey-lighter leading-normal">
            <p>
                Internet speed is calculated by
                <b>Chrome Network Information API</b>. click
                <a href="https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API"
                    target="_black">here</a>
                to view the MDN docs. Note that this API is not supported by
                Firefox.
            </p>
        </div>
    </div>
</div>

const connection =
		navigator.connection ||
		navigator.mozConnection ||
		navigator.webkitConnection;

connection.addEventListener('change', updateConnectionStatus);

return connection;
}

function updateConnectionStatus() {
	
	var speed =
		connection.downlink +
		Math.floor(Math.random() * 10) / 15 -
		Math.floor(Math.random() * 10) / 15;

if((speed<0)||(connection.downlink==0)) speed = 0.0;

var type = connection.effectiveType;
	var rtt = connection.rtt;
	var angle = calcAngle(speed);

var connection = getConnection();
let timerId = setInterval(() => dummyRequest(), 1000 + Math.random() * 500 + Math.random() * 500 );

function refreshSpeedOMeter(){
	clearInterval(timerId);
	let speed = 0;
	let angle = calcAngle(speed);
	var type = "-";
	var rtt = connection.rtt;

timerId = setInterval(() => dummyRequest(), 1000 + Math.random() * 500 + Math.random() * 500 );
}

function dummyRequest() {
	// fetch("http://i66.tinypic.com/2s1unv6.jpg")
	// 	.then(response => response.blob())
	// 	.then(images => {
	// 		outside = URL.createObjectURL(images);
	// 		console.log(outside);
	// 	})
	// 	.catch(e => console.log(e));

updateConnectionStatus();
}

return Math.round(angle);
}
</script>

.speedometr .scale {
        position: absolute;
        border: 3px solid red;
        width: 65px;
        height: 15px;
        border-radius: 100% 100% 0 0;
        border-bottom: none;
    }

.speedometr .scale.low {
        top: 10px;
        left: -30px;
        border-color: #e74c3c;
        transform: rotate(-50deg);
        transform-origin: top right;
    }

.speedometr .scale.middle {
        left: calc(50% - 37px);
        border-color: #f1c40f;
    }

.speedometr .scale.hight {
        top: 10px;
        right: -30px;
        transform: rotate(50deg);
        transform-origin: top left;
        border-color: #2ecc71;
    }

.speedometr .arrow {
        position: absolute;
        bottom: 5px;
        left: 50%;
        margin-left: -1px;
        width: 1px;
        height: 66px;
        border: 1px solid;
        border-color: #2c3e50;
        border-radius: 100% 100% 0 0;
        background-color: black;
        transform: rotate(-75deg);
        transform-origin: bottom center;
        transition: transform 0.8s;
        transition-timing-function: cubic-bezier(0.65, 1.95, 0.03, 0.32);
    }

.speedometr .arrow:after {
        content: '';
        display: block;
        height: 14px;
        width: 14px;
        background-color: #2c3e50;
        border-radius: 100%;
        position: absolute;
        bottom: -1px;
        left: -6px;
    }
</style>

Related Examples

Music Player

Author:
Abhijit Sen

3 years ago

17.7k
Number counter input

Author:
Prem..

3 years ago

16.5k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.8k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

3 years ago

15.9k
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Author:
Prajwal Hallale

3 years ago

22.1k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Author:
Alok

2 years ago

19k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Author:
Prashant

3 years ago

15.2k
Simple count down timer

Author:
Gopi Yadav

3 years ago

15.4k
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

3 years ago

13k
Strong password generator
With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

Author:
S. Patel

3 years ago

9.8k
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Author:
Ijila Itunu

1 month ago

283
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components