Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding connecting spinner and blinking error to webrtc display

Browse source 
I put a connecting spinner around the user name when the user is connecting.
Also, if an error occurs, we will see a blinking red circle around the player name.
This commit is contained in:
David Négrier 2020-06-06 22:49:55 +02:00
parent 96c5d92c46
commit f2c9647882
3 changed files with 100 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

60
front/dist/resources/style/style.css vendored
View file

@ -148,4 +148,62 @@ video{
top: calc(48px - 37px);
left: calc(48px - 41px);
position: relative;
}
}
/* Spinner */
.connecting-spinner {
/*display: inline-block;*/
position: absolute;
left: calc(50% - 68px);
top: calc(50% - 68px);
width: 130px;
height: 130px;
}
.connecting-spinner:after {
content: " ";
display: block;
width: 108px;
height: 108px;
margin: 8px;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
animation: connecting-spinner 1.2s linear infinite;
}
@keyframes connecting-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.rtc-error {
position: absolute;
left: calc(50% - 68px);
top: calc(50% - 68px);
width: 130px;
height: 130px;
}
.rtc-error:after {
content: " ";
display: block;
width: 108px;
height: 108px;
margin: 8px;
border-radius: 50%;
border: 6px solid #f00;
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}