Day 48 - Speedometer

Developer
Arnelle Balane
Size
6,078 Kb
Views
14,168
  1. Day 48 - Speedometer Previews
  2. Day 48 - Speedometer HTML Codes
  3. Day 48 - Speedometer CSS Codes
  4. Day 48 - Speedometer JS Codes

How do I make an day 48 - speedometer?

Implementation of Day 48 design from @npaulflavius' 100 Days UI Challenge. What is a day 48 - speedometer? How do you make a day 48 - speedometer? This script and codes were developed by Arnelle Balane on 14 October 2022, Friday.

Day 48 - Speedometer Previews
IQ Test

Day 48 - Speedometer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 48 - Speedometer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="speedometer-container"> <div class="speedometer"> <div class="inner-ring"></div> <div class="outer-ring"><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span><span class="tick"></span> </div> <div class="digit-ring"><span class="digit">0</span><span class="digit">20</span><span class="digit">40</span><span class="digit">60</span><span class="digit">80</span><span class="digit">100</span><span class="digit">120</span><span class="digit">140</span><span class="digit">160</span> </div> <div class="details"> <p class="label">Download</p> <p class="speed">87.3</p> <p class="unit">Mbps</p> </div> <div class="progress"></div> <button class="retry-button">Retry</button> <footer> <div class="stat"> <label>Ping</label> <p>2ms</p> </div> <div class="stat"> <label>Upload</label> <p>67.7 Mbps</p> </div> </footer> </div> <div class="overlay"></div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Day 48 - Speedometer - Script Codes CSS Codes

/** Function Definitions **/
/** Basic Styles **/
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box;
}
html { font-size: 62.5%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1; color: #666; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
/** Speedometer Styles **/
.speedometer-container { width: 48rem; height: 48rem; position: relative; background-color: #000; box-shadow: 0 0 10rem rgba(0,0,0,0.75);
}
.speedometer-container::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: -webkit-radial-gradient(top left, circle, #fff, transparent); background-image: radial-gradient(circle at top left, #fff, transparent); opacity: 0.12;
}
.overlay { pointer-events: none;
}
.overlay::before,
.overlay::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.overlay::before { background-image: -webkit-radial-gradient(top left, circle, #25fabb, transparent); background-image: radial-gradient(circle at top left, #25fabb, transparent); opacity: 0.04;
}
.overlay::after { background-image: -webkit-radial-gradient(bottom right, circle, #874bd7, transparent); background-image: radial-gradient(circle at bottom right, #874bd7, transparent); opacity: 0.2;
}
.speedometer .inner-ring { width: 21rem; height: 21rem; position: absolute; top: calc(50% - 12.5rem); left: calc(50% - 10.5rem);
}
.speedometer .inner-ring::before,
.speedometer .inner-ring::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid transparent; border-top: 2px solid #3b3d45; border-right: 2px solid #3b3d45; border-radius: 50%;
}
.speedometer .inner-ring::before { -webkit-transform: rotate(-75deg); transform: rotate(-75deg);
}
.speedometer .inner-ring::after { -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
.speedometer .outer-ring { width: 32rem; height: 32rem; position: absolute; top: calc(50% - 18rem); left: calc(50% - 16rem); border-radius: 50%;
}
.speedometer .digit-ring { position: absolute; top: calc(50% - 2rem); left: 50%;
}
.speedometer .tick { width: 0.8rem; border-top: 2px solid #3b3d45; position: absolute; top: calc(50% - 0.1rem); left: calc(50% - 0.4rem);
}
.speedometer .tick:nth-child(6n+1) { width: 1.6rem; left: calc(50% - 0.8rem); border-color: #787a81;
}
.speedometer .digit { width: 2rem; height: 2rem; position: absolute; top: calc(50% - 1rem); left: calc(50% - 1rem); font-weight: bold; text-align: center; line-height: 2rem;
}
.speedometer .details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 21rem; height: 21rem; position: absolute; top: calc(50% - 12.5rem); left: calc(50% - 10.5rem);
}
.speedometer .label { font-size: 1.2rem; font-weight: bold; text-transform: uppercase;
}
.speedometer .speed { font-size: 6rem; color: #fff;
}
.speedometer .unit { font-size: 1.6rem;
}
.speedometer .progress { width: 21rem; height: 21rem; position: absolute; top: calc(50% - 12.5rem); left: calc(50% - 10.5rem); border-radius: 50%;
}
.speedometer .progress::before { content: ""; position: absolute; top: -0.2rem; left: calc(50% - 0.3rem); width: 0.6rem; height: 0.6rem; border-radius: 50%; background-color: #f1252e; box-shadow: 0 0 6rem 2rem rgba(241,37,46,0.35);
}
.speedometer .retry-button { width: 10rem; border: 2px solid #3b3d45; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; left: calc(50% - 5rem); bottom: 13.5rem; font-size: 1.2rem; font-weight: bold; text-align: center; text-transform: uppercase; line-height: 3rem; color: #666; border-radius: 3rem; background-color: transparent; cursor: pointer; outline: none; -webkit-transition: background-color 250ms ease-out; transition: background-color 250ms ease-out;
}
.speedometer .retry-button:hover,
.speedometer .retry-button:focus { background-color: rgba(59,61,69,0.15);
}
.speedometer footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 3.5rem 0; position: absolute; top: auto; left: 0; right: 0; bottom: 0;
}
.speedometer .stat { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 0; padding: 1rem 0; text-align: center;
}
.speedometer .stat:not(:last-child) { border-right: 2px solid rgba(255,255,255,0.05);
}
.speedometer .stat label { display: block; margin-bottom: 0.75rem; font-size: 1.2rem; font-weight: bold; text-transform: uppercase;
}
.speedometer .stat p { font-size: 1.4rem; color: #fff;
}

Day 48 - Speedometer - Script Codes JS Codes

'use strict';
var ticks = $('.tick');
var digits = $('.digit');
var details = $('.details');
var progress = $('.progress');
var outerRingRadius = 164;
var digitRingRadius = 145;
ticks.each(function (i) { var angle = 210 - i * 5; var theta = deg2rad(angle); var radius = outerRingRadius + (i % 6 ? 0 : 4); var x = Math.cos(theta) * radius; var y = Math.sin(theta) * -radius; var transform = ['translate(' + x + 'px, ' + y + 'px)', 'rotate(' + -angle + 'deg)'].join(' '); $(this).css({ '-webkit-transform': transform, '-moz-transform': transform, 'transform': transform });
});
digits.each(function (i) { var angle = 210 - i * 30; var theta = deg2rad(angle); var x = Math.cos(theta) * digitRingRadius; var y = Math.sin(theta) * -digitRingRadius; $(this).css({ '-webkit-transform': 'translate(' + x + 'px, ' + y + 'px)', '-moz-transform': 'translate(' + x + 'px, ' + y + 'px)', 'transform': 'translate(' + x + 'px, ' + y + 'px)' });
});
$('.retry-button').on('click', function () { statValueCurrent = 0; updateDetails();
});
var frameCount = 100;
var frameInterval = 0.3;
var digitValueMax = 160;
var statValueMax = 87.3;
var statValueCurrent = 0;
var statValueInterval = statValueMax / frameCount;
updateDetails();
function updateDetails() { if (statValueCurrent.toFixed(1) > statValueMax) { return; } setStatValue(statValueCurrent.toFixed(1)); statValueCurrent += statValueInterval; setTimeout(updateDetails, frameInterval);
}
function setStatValue(value) { var angle = -120 + 240 * (value / digitValueMax); progress.css({ 'transform': 'rotate(' + angle + 'deg)' }); details.find('.speed').text(value);
}
function deg2rad(angle) { return angle * (Math.PI / 180);
}
function rad2deg(angle) { return angle * (180 / Math.PI);
}
Day 48 - Speedometer - Script Codes
Day 48 - Speedometer - Script Codes
Home Page Home
Developer Arnelle Balane
Username arnellebalane
Uploaded October 14, 2022
Rating 4.5
Size 6,078 Kb
Views 14,168
Do you need developer help for Day 48 - Speedometer?

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!

Arnelle Balane (arnellebalane) Script Codes
Name
Day 85 - Cinema Application
Day 60 - Knob
Yummy Food App
Day 78 - TV UI - Player Card
Pixel mario
Day 77 - Choose Category
Day 41 - File Upload Widget
Running pixel mario
Day 11 - Calendar Card
Virtual Filesystem
Create amazing video scripts 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!