Source Code

Membuat Animasi Speedtest Menggunakan HTML CSS & JavaScript

Mandan Koding1 September 20222

Selamat datang kembali di mandankoding.com, Pada artikel kali ini kita akan Membuat Animasi Speedtest Menggunakan HTML CSS & JavaScript. Pada artikel sebelumnya kita juga sudah membuat mini proyek tentang Cara membatasi jumlah Karakter pada Textarea.

Kamu juga bisa melihat video proses pembuatannya di Channel Youtube Mandan Koding dengan judul Membuat Animasi Speedtest Menggunakan HTML CSS & JavaScript.

Dalam video di atas, Kamu dapat melihat demo Speedtest ini dan bagaimana kami membuatnya menggunakan HTML CSS & JavaScript. Disana kita menggunakan banyak fungsi JavaScript, salah salah satunya menggunakan setTimeout.

SetTimeout Adalah suatu fungsi yang mengijinkan kita untuk menjalankan fungsinya setelah interval dari waktu. setInterval mengijinkan kita untuk menjalankan fungsinya berulang-ulang, dimulai seterlah interval dari waktu yang diberikan, lalu akan terus berulang pada interval waktu yang diberikan. ref: id.javascript.info

Tutorial Kami Lainnya:

Membuat Animasi Speedtest Menggunakan HTML CSS & JavaScript

Kamu dapat mengcopy kode dibawah untuk praktek:

Pertama, Kita membuat suatu file HTML dengan nama index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mandan Koding</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">

        <svg class="speed" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"
            style="enable-background:new 0 0 100 100;" xml:space="preserve">

            <path style="fill: #e31212;"
                d="M12.9,75.5c0.3,0.5,0.7,0.9,1,1.4l7.6-5.7c-0.3-0.4-0.5-0.7-0.8-1.1L12.9,75.5z" />
            <path style="fill: #ea1f39; display: none;"
                d="M9.3,69.3c0.3,0.5,0.5,1,0.8,1.5l8.4-4.4c-0.2-0.4-0.4-0.8-0.6-1.2L9.3,69.3z" />
            <path style="fill: #f12d60; display: none;"
                d="M6.7,62.4C6.9,62.9,7,63.5,7.2,64l9.1-3c-0.1-0.4-0.3-0.8-0.4-1.2L6.7,62.4z" />
            <path style="fill: #f83c85; display: none;"
                d="M5.3,55.2c0,0.6,0.1,1.1,0.2,1.7l9.4-1.5c-0.1-0.4-0.1-0.9-0.2-1.3L5.3,55.2z" />
            <path style="fill: #ff4ba8; display: none;"
                d="M5,47.9c0,0.6,0,1.1,0,1.7l9.5,0.1c0-0.5,0-0.9,0-1.4L5,47.9z" />
            <path style="fill: #fb3eb2; display: none;"
                d="M5.9,40.7c-0.1,0.6-0.2,1.1-0.3,1.7L15,44c0.1-0.4,0.2-0.9,0.2-1.3L5.9,40.7z" />
            <path style="fill: #f732bf; display: none;"
                d="M8,33.7c-0.2,0.5-0.4,1.1-0.6,1.6l9,3.1c0.1-0.4,0.3-0.9,0.5-1.3L8,33.7z" />
            <path style="fill: #f226cd; display: none;"
                d="M11.2,27.1c-0.3,0.5-0.5,1-0.8,1.5l8.3,4.6c0.2-0.4,0.4-0.8,0.7-1.2L11.2,27.1z" />
            <path style="fill: #ee1adc; display: none;"
                d="M15.5,21.2c-0.4,0.4-0.8,0.9-1.1,1.3l7.5,5.8c0.3-0.4,0.6-0.7,0.9-1.1L15.5,21.2z" />
            <path style="fill: #ae19de; display: none;"
                d="M20.6,16c-0.5,0.3-0.9,0.7-1.3,1.1l6.5,7c0.3-0.3,0.6-0.6,1-0.9L20.6,16z" />
            <path style="fill: #6618cd; display: none;"
                d="M26.4,11.7c-0.5,0.3-0.9,0.6-1.4,0.9l5.3,7.9c0.3-0.2,0.7-0.5,1-0.7L26.4,11.7z" />
            <path style="fill: #2716bd; display: none;"
                d="M33,8.3c-0.6,0.2-1.1,0.5-1.6,0.7l3.9,8.7c0.4-0.2,0.9-0.4,1.3-0.6L33,8.3z" />
            <path style="fill: #1537ac; display: none;"
                d="M39.9,6.1c-0.5,0.1-1.1,0.3-1.6,0.4l2.5,9.2c0.4-0.1,0.8-0.2,1.2-0.3L39.9,6.1z" />
            <path style="fill: #2061c1; display: none;"
                d="M47.2,5.2c-0.6,0-1.1,0-1.7,0.1l0.9,9.4c0.4,0,0.9-0.1,1.3-0.1L47.2,5.2z" />
            <path style="fill: #2c90d5; display: none;"
                d="M54.5,5.2c-0.6,0-1.1-0.1-1.7-0.1l-0.6,9.5c0.4,0,0.9,0.1,1.3,0.1L54.5,5.2z" />
            <path style="fill: #3bc2ea; display: none;"
                d="M61.6,6.5c-0.5-0.1-1.1-0.3-1.6-0.4l-2.2,9.3c0.4,0.1,0.9,0.2,1.3,0.3L61.6,6.5z" />
            <path style="fill: #4bf7ff; display: none;"
                d="M68.6,9C68,8.7,67.5,8.5,67,8.3l-3.6,8.8c0.4,0.2,0.8,0.3,1.2,0.5L68.6,9z" />
            <path style="fill: #39f6d2; display: none;"
                d="M74.9,12.5c-0.4-0.3-0.9-0.6-1.4-0.9l-5,8.1c0.4,0.2,0.7,0.5,1.1,0.7L74.9,12.5z" />
            <path style="fill: #28ed99; display: none;"
                d="M80.6,17c-0.5-0.4-0.9-0.7-1.3-1.1l-6.2,7.2c0.3,0.3,0.7,0.6,1,0.9L80.6,17z" />
            <path style="fill: #19e55d; display: none;"
                d="M85.7,22.4c-0.4-0.4-0.7-0.9-1.1-1.3l-7.4,6.1c0.3,0.3,0.5,0.7,0.8,1L85.7,22.4z" />
            <path style="fill: #0adc1e; display: none;"
                d="M89.6,28.6c-0.2-0.5-0.5-1-0.8-1.5L80.6,32c0.2,0.4,0.4,0.7,0.6,1.1L89.6,28.6z" />
            <path style="fill: #0adc1e; display: none;"
                d="M92.5,35.3c-0.2-0.5-0.4-1.1-0.6-1.6l-8.8,3.4c0.2,0.4,0.3,0.8,0.5,1.2L92.5,35.3z" />
            <path style="fill: #0adc1e; display: none;"
                d="M94.4,42.2c-0.1-0.5-0.2-1.1-0.3-1.6l-9.4,2c0.1,0.4,0.2,0.9,0.2,1.3L94.4,42.2z" />
            <path style="fill: #0adc1e; display: none;"
                d="M95,47.8l-9.5,0.5c0,0.4,0,0.9,0,1.3l9.5-0.1C95,48.9,95,48.4,95,47.8z" />
            <path style="fill: #0adc1e; display: none;"
                d="M94.5,56.8c0.1-0.5,0.1-1.1,0.2-1.7l-9.4-1c-0.1,0.4-0.1,0.9-0.2,1.3L94.5,56.8z" />
            <path style="fill: #0adc1e; display: none;"
                d="M92.8,63.9c0.2-0.5,0.3-1,0.5-1.7l-9.1-2.6c-0.1,0.4-0.3,0.9-0.4,1.3L92.8,63.9z" />
            <path style="fill: #0adc1e; display: none;"
                d="M90,70.7c0.2-0.5,0.5-1,0.8-1.5l-8.7-4.1c-0.2,0.4-0.4,0.8-0.6,1.2L90,70.7z" />
            <path style="fill: #0adc1e; display: none;"
                d="M89.9,80.1c0.5-0.7,1-1.3,1.4-1.9l-12-8.2c-0.3,0.4-0.6,0.9-0.9,1.3L89.9,80.1z" />
        </svg>

        <div class="speed-label">0</div>

    </div>

    <!-- script js -->
    <script src="jquery.js"></script>
    <!-- app js-->
    <script src="app.js"></script>

</body>

</html>

Kedua, kita akan membuat file JavaScript dengan nama app.js

var delay = 2000, value = 0, valueStore = 0, tick = 1, tickStore = 1, tickDiff = 0, tickDiffValue = 0;
function valBetween(v, min, max) {
    return (Math.min(max, Math.max(min, v)));
}
(function loop() {
    value = Math.ceil(Math.random() * 100);
    tick = valBetween(Math.ceil((value / 100) * 28), 1, 28);
    tickDiff = Math.abs(tick - tickStore);
    tickDiffValue = Math.abs(value - valueStore) / tickDiff;
    console.log("tickDiff: " + tickDiffValue + " * " + tickDiff + " = " + (tickDiffValue * tickDiff));
    var counter = 0, valueStoreTemp = valueStore, tickStoreTemp = tickStore;
    if (value > valueStore) {
        for (i = tickStoreTemp; i <= tick; i++) {
            (function (i) {
                setTimeout(function () {

                    $('.speed path:nth-child(' + i + ')').show();
                    $('.speed-label')
                        .css('color', $('.speed path:nth-child(' + i + ')')[0].style.fill)
                        .text(Math.ceil(valueStoreTemp + (tickDiffValue * Math.abs(tickStoreTemp - i))));
                    if (i == tick) { $('.speed-label').text(value); }
                    // console.log(i);
                }, 50 * counter);
                counter++;
            }(i));
        }
    } else if (value < valueStore) {
        for (i = tickStoreTemp; i >= tick; i--) {
            (function (i) {
                setTimeout(function () {

                    $('.speed path:nth-child(' + i + ')').hide();
                    $('.speed-label')
                        .css('color', $('.speed path:nth-child(' + i + ')')[0].style.fill)
                        .text(Math.floor(valueStoreTemp - (tickDiffValue * Math.abs(tickStoreTemp - i))));
                    if (i == tick) { $('.speed-label').text(value); }
                    // console.log(i);
                }, 50 * counter);
                counter++;
            }(i));
        }
    }
    valueStore = value;
    tickStore = tick;
    window.setTimeout(loop, delay);
})();

Ketiga, Untuk file jquery silahkan download pada link disamping: Download File

Ke empat, kita membuat file CSS dengan nama style.css

body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Nunito", sans-serif;
    background-color: #3eb7cf;
    height: 100vh;
}

.container {
    position: relative;
    width: 300px;
    height: 300px;
    padding: 20px;
    background-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    border: 10px solid #5dd2db;
}

.container .speed {
    width: 100%;
    height: 100%;
    padding: 12px;
    background-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
}

.container .speed path:first-child {
    opacity: 1 !important;
    display: block !important;
}

.container .speed-label {
    position: absolute;
    top: 47.5%;
    left: 50%;
    font-size: 64px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #e31212;
}

.container .speed-label::after {
    content: 'Mbit/s';
    position: absolute;
    font-size: 35%;
    bottom: 5px;
    left: 50%;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
}

.container::before,
.container::after {
    display: block;
    position: absolute;
    bottom: 25%;
    font-family: inherit;
    font-size: 15px;
    color: #9198af;
    font-weight: bold;
}

.container::before {
    content: "0";
    left: 28%;
}

.container::after {
    content: "100";
    right: 25%;
}