esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

MAPG-52 replace loading animation

Browse Source
This commit is contained in:
Bence Pőcze 2020-05-24 14:02:42 +02:00
parent 5006aae59a
commit 4641aa81f8
4 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/static/css/mapguesser.css
View File

@ -83,12 +83,12 @@ div.buttonContainer.bottom {
#loading { #loading {
position: absolute; position: absolute;
width: 40px; width: 64px;
height: 40px; height: 64px;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-top: -20px; margin-top: -32px;
margin-left: -20px; margin-left: -32px;
z-index: 3; z-index: 3;
} }

BIN
public/static/img/loading.gif (Stored with Git LFS)
View File

Binary file not shown.

11
public/static/img/loading.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve">
<g>
<linearGradient id="linear-gradient">
<stop offset="0%" stop-color="#ffffff" fill-opacity="0"/>
<stop offset="100%" stop-color="#000000" fill-opacity="1"/>
</linearGradient>
<path d="M63.85 0A63.85 63.85 0 1 1 0 63.85 63.85 63.85 0 0 1 63.85 0zm.65 19.5a44 44 0 1 1-44 44 44 44 0 0 1 44-44z" fill="url(#linear-gradient)" fill-rule="evenodd"/>
<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1080ms" repeatCount="indefinite"></animateTransform>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 831 B

2
views/game.php
View File

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div id="loading"> <div id="loading">
<img src="static/img/loading.gif"> <img src="static/img/loading.svg">
</div> </div>
<div id="roundInfo"> <div id="roundInfo">
<p>Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p> <p>Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p>