Rockingcool/india-translator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add loading spinner while map loads; fade in map and fade out spinner; load HTMX locally; show text while translations and romanizations are being fetched

Browse Source
This commit is contained in:
Aadhavan Srinivasan
2025-03-28 14:40:10 -05:00
parent 1fbe5a1abf
commit 2f7cdd2ea7
1 changed files with 84 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
index.html
View File

@@ -10,7 +10,7 @@
<title>Indian Translate</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script src="./htmx.min.js"></script>
<style>
body {
background-color: #f4f4f4;
@@ -24,7 +24,16 @@
svg {
border: 1px solid;
padding: 2em;
visibility: hidden;
opacity: 0;
transition: opacity 1s, visibility 2s;
}
svg.show {
visibility: visible;
opacity: 1;
}
h1 {
margin-block: 0.67em;
font-size: 2em;
@@ -66,11 +75,6 @@
visibility: visible;
}
.testClass:hover {
fill: red;
cursor: default;
}
.district {
stroke: white;
stroke-width: 0.25;
@@ -108,21 +112,93 @@
fill-opacity: 1;
transition: fill-opacity 0.3s;
}
/* Position map load spinner in the middle of the SVG */
.svgContainer {
position: relative;
display: inline-block;
}
.svgContainer .mapLoadSpinner {
position: absolute;
top: 40%;
left: 40%;
}
/* Credit to https://lukehaas.me/projects/css-loaders/ */
.mapLoadSpinner,
.mapLoadSpinner:after {
border-radius: 50%;
width: 10em;
height: 10em;
transition: opacity 1s, visibility 2s;
}
.mapLoadSpinner.hide {
opacity: 0;
visibility: hidden;
}
.mapLoadSpinner {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255,158,83, 0.2);
border-right: 1.1em solid rgba(255,158,83, 0.2);
border-bottom: 1.1em solid rgba(255,158,83, 0.2);
border-left: 1.1em solid #ff9e53;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#fetchingText {
visibility: hidden;
}
</style>
</head>
<body>
<main>
<section id="textStuff">
<h1>Indian Translate</h1>
<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::before-request="hideText(event.detail.xhr.response)" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::before-request="hideTranslationsAndShowText(event.detail.xhr.response)" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
<label for="query">Enter text to translate:</label>
<input type="text" name="query" id="query" required/>
<input type="submit" value="Translate"/>
</form>
<progress id="loading-screen" class="loading-indicator"></progress>
<h3 id="fetchingText">Fetching translations...</h3>
<noscript>
<h2>This website requires javascript to work.</h2>
</noscript>
</section>
<svg id = "indiaMap" width="1300" height="1300"></svg>
<section class="svgContainer">
<svg id = "indiaMap" width="1300" height="1300"></svg>
<div id="mapLoadSpinner" class="mapLoadSpinner"></div>
</section>
</main>
<script type="text/javascript" src="index.js"></script>