2. ASPRunner.NET General questions
  3. Custom Spinner
This topic is locked

Custom Spinner

 		1/22/2023 1:14:37 AM
ASPRunner.NET General questions
W
 wshoap authorDevClub member

I created a custom spinner that just uses HTML and CSS. Its lightweight and elegant. Does anyone know how to use this in place of the existing "Loading...." spinner?

I have pasted the HTML file and CSS code below. Save these in two separate files (spinner.html and spinner.css) If you save these in the same folder, open the HTML file with our browser to see the spinner in action.

<!DOCTYPE html>
<html>
<head>
<title>Spinner</title>
<link rel="stylesheet" type="text/css" href="spinner.css">
</head>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
<div class="bounce4"></div>
<div class="bounce5"></div>
</div>

</body>
</html>

body, html {
height: 100%;
margin: 0;
}

.spinner {
width: 150px;
height: 40px;
text-align: center;
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
}

.spinner > div {
width: 20px;
height: 50%;
border-radius: 5px;
display: inline-block;
}

.spinner .bounce1 {
background-color: rgb(247, 186, 57);
-webkit-animation: sk-zoom 1.4s infinite ease-in-out;
animation: sk-zoom 1.4s infinite ease-in-out;
}

.spinner .bounce2 {
background-color: rgb(247, 186, 57);
-webkit-animation: sk-zoom 1.4s infinite ease-in-out 0.2s;
animation: sk-zoom 1.4s infinite ease-in-out 0.2s;
}

.spinner .bounce3 {
background-color: rgb(247, 186, 57);
-webkit-animation: sk-zoom 1.4s infinite ease-in-out 0.4s;
animation: sk-zoom 1.4s infinite ease-in-out 0.4s;
}

.spinner .bounce4 {
background-color: rgb(247, 186, 57);
-webkit-animation: sk-zoom 1.4s infinite ease-in-out 0.6s;
animation: sk-zoom 1.4s infinite ease-in-out 0.6s;
}

.spinner .bounce5 {
background-color: rgb(247, 186, 57);
-webkit-animation: sk-zoom 1.4s infinite ease-in-out 0.8s;
animation: sk-zoom 1.4s infinite ease-in-out 0.8s;
}

@-webkit-keyframes sk-zoom {
0%, 100% { -webkit-transform: scale(0) }
50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-zoom {
0%, 100% {
transform: scale(0);
} 50% {
transform: scale(1.0);
}
}
fhumanes 1/24/2023

Hello,

I have an example that makes more or less, what you are requesting.
https://fhumanes.com/blog/guias-desarrollo/guia-29-informar-a-traves-de-barra-de-progreso/

The problem is that my code is Phprunner and I only conocate PHP, so I can't help you on your development platform.

I think, it is possible that seeing my example may inspire you how you can do it.

Regards,