beenull/speedtest
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

change of button using animation

Browse source
This commit is contained in:
Naitik pitroda 2022-10-20 11:26:06 +05:30
parent 97e0390680
commit 55e621a45a
5 changed files with 135 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
example-multipleServers-pretty.html
View file

@ -107,6 +107,7 @@ function I(id){return document.getElementById(id);}
body{
text-align:center;
font-family:"Roboto",sans-serif;
}
h1{
color:#404040;
@ -149,10 +150,12 @@ function I(id){return document.getElementById(id);}
height:9em;
position:relative;
box-sizing:border-box;
border: 2px solid black;
}
div.testName{
position:absolute;
top:0.1em; left:0;
top:0.4em; left:0;
width:100%;
font-size:1.4em;
z-index:9;
@ -173,6 +176,11 @@ function I(id){return document.getElementById(id);}
#pingText,#jitText{
color:#AA6060;
}
#ipArea {
position: relative;
top:1em
}
div.meterText:empty:before{
color:#505050 !important;
content:"0.00";
@ -232,8 +240,8 @@ function I(id){return document.getElementById(id);}
<div class="unit">ms</div>
</div>
</div>
<div id="ipArea">
IP Address: <span id="ip"></span>
<div id="ipArea"><h4>IP Address:</h4>
<span id="ip"></span>
</div>
</div>
<a href="https://github.com/librespeed/speedtest">Source code</a>

50
example-singleServer-customSettings.html
View file

@ -63,20 +63,22 @@ function I(id){return document.getElementById(id);}
#startStopBtn{
display:inline-block;
margin:0 auto;
color:#6060AA;
background-color:rgba(0,0,0,0);
background-color:rgba(87, 28, 28, 0);
border:0.15em solid #6060FF;
border-radius:0.3em;
transition:all 0.3s;
box-sizing:border-box;
width:8em; height:3em;
line-height:2.7em;
cursor:pointer;
box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
}
#startStopBtn:hover{
box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
}
#startStopBtn.running{
background-color:#FF3030;
border-color:#FF6060;
@ -88,6 +90,38 @@ function I(id){return document.getElementById(id);}
#startStopBtn.running:before{
content:"Abort";
}
#startStopBtn:hover, .testArea:hover{
background-image: linear-gradient(
to right,
#E7484F,
#E7484F 16.65%,
#F68B1D 16.65%,
#F68B1D 33.3%,
#FCED00 33.3%,
#FCED00 49.95%,
#009E4F 49.95%,
#009E4F 66.6%,
#00AAC3 66.6%,
#00AAC3 83.25%,
#732982 83.25%,
#732982 100%,
#E7484F 100%
);
animation:slidebg 2s linear infinite;
}
@keyframes slidebg {
to {
background-position:20vw;
}
}
#test{
margin-top:2em;
margin-bottom:12em;
@ -98,6 +132,8 @@ function I(id){return document.getElementById(id);}
height:9em;
position:relative;
box-sizing:border-box;
border: 3px solid black;
}
div.testName{
position:absolute;

27
example-singleServer-gauges.html
View file

@ -135,6 +135,33 @@ function initUI(){
cursor:pointer;
box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
}
#startStopBtn:hover{
background-image: linear-gradient(
to right,
#E7484F,
#E7484F 16.65%,
#F68B1D 16.65%,
#F68B1D 33.3%,
#FCED00 33.3%,
#FCED00 49.95%,
#009E4F 49.95%,
#009E4F 66.6%,
#00AAC3 66.6%,
#00AAC3 83.25%,
#732982 83.25%,
#732982 100%,
#E7484F 100%
);
animation:slidebg 2s linear infinite;
}
@keyframes slidebg {
to {
background-position:20vw;
}
}
#startStopBtn:hover{
box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
}

27
example-singleServer-pretty.html
View file

@ -85,6 +85,33 @@ function I(id){return document.getElementById(id);}
#startStopBtn:before{
content:"Start";
}
#startStopBtn:hover, .testArea:hover{
background-image: linear-gradient(
to right,
#E7484F,
#E7484F 16.65%,
#F68B1D 16.65%,
#F68B1D 33.3%,
#FCED00 33.3%,
#FCED00 49.95%,
#009E4F 49.95%,
#009E4F 66.6%,
#00AAC3 66.6%,
#00AAC3 83.25%,
#732982 83.25%,
#732982 100%,
#E7484F 100%
);
animation:slidebg 2s linear infinite;
}
@keyframes slidebg {
to {
background-position:20vw;
}
}
#startStopBtn.running:before{
content:"Abort";
}

27
example-singleServer-progressBar.html
View file

@ -94,6 +94,33 @@ function I(id){return document.getElementById(id);}
margin-top:2em;
margin-bottom:12em;
}
#startStopBtn:hover, .testArea:hover{
background-image: linear-gradient(
to right,
#E7484F,
#E7484F 16.65%,
#F68B1D 16.65%,
#F68B1D 33.3%,
#FCED00 33.3%,
#FCED00 49.95%,
#009E4F 49.95%,
#009E4F 66.6%,
#00AAC3 66.6%,
#00AAC3 83.25%,
#732982 83.25%,
#732982 100%,
#E7484F 100%
);
animation:slidebg 2s linear infinite;
}
@keyframes slidebg {
to {
background-position:20vw;
}
}
div.testArea{
display:inline-block;
width:14em;