[SOLVED] Loading screen progress circle

Hello everyone, I had a question how to change the bar progress to a circle progress?

Hi @TheGiantNinja,

That is doable but you will have to code this using HTML/CSS.

I don’t have an example in mind but most of the generic css example that you may find online, given some refactoring, can be adapted to work.

I made this two scripts:
HTML script:

<!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>rtb.io - 3D Game</title>
    <link rel="stylesheet" href="./Scripts/style.css">
</head>
<body>
    <!-- loading Screen -->
    <div class="spinner-wrapper">
        <div class="spinner"></div>
    </div>
    
    <script>
        let spinnerWrapper = document.querySelector('.spinner-wrapper');
        window.addEventListener('load', function () {
            spinnerWrapper.style.display = 'none';
        });
    </script>
</body>
</html>

CSS Script:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 10px;
}

.spinner-wrapper{
    width: 100%;
    height: 100%;
    background-color: #151515;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    position: relative;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
}

.spinner::before,
.spinner:after{
    content: "";
    position: absolute;
    border-radius: 50%;
}

.spinner:before {
    width: 100%;
    height: 100%;
    background-image:linear-gradient(90deg, #ff00cc 0%,#333399 100% );
    animation: spin .5s infinite linear;
}
.spinner:after {
    width: 90%;
    height: 90%;
    background-color: #151515;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }

}

The problem is how to make this work?

So, the default splash screen creates all HTML DOM elements through JavaScript, same with CSS.

You will have to convert your code to JavaScript, study that default splash screen on how that works.

Alternatively you can download your build and modify the index.html to use your code for loading progress, though that can be a bit messy.

Alright Leo, thanks for helping man

1 Like