Spinner eingebaut

Fehlermeldungen pro TAB getrennt

app.js

@@ -51,6 +51,7 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname,'node_modules')));
 
 app.use('/api', apiRouter)
 app.use('/srv', apiRouter)

package-lock.json

@@ -21,7 +21,8 @@
         "luxon": "^3.3.0",
         "morgan": "~1.9.1",
         "pug": "^3.0.2",
-        "sass": "^1.58.3"
+        "sass": "^1.58.3",
+        "spin.js": "^4.1.2"
       },
       "bin": {
         "www": "bin/www.js"
@@ -1726,6 +1727,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/spin.js": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-4.1.2.tgz",
+      "integrity": "sha512-ua/yEpxEwyEUWs57tMQYdik/KJ12sQRyMXjSlK/Ai927aEUDVY3FXUi4ml4VvlLCTQNIjC6tHyjSLBrJzFAqMA==",
+      "license": "MIT"
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",

package.json

@@ -24,6 +24,7 @@
     "luxon": "^3.3.0",
     "morgan": "~1.9.1",
     "pug": "^3.0.2",
-    "sass": "^1.58.3"
+    "sass": "^1.58.3",
+    "spin.js": "^4.1.2"
   }
 }

public/javascripts/chart_utilities.js

@@ -238,3 +238,12 @@ export const cityCoords = async (city) => {
     }
 }
 
+// table to distribute the different charts
+export const ttIndex = Object.freeze({
+    map: 0,
+    live: 1,
+    havg: 2,
+    davg: 3,
+    daynight: 4,
+    lden: 5
+})

public/javascripts/datetime.js

@@ -1,6 +1,6 @@
 // all date and time functions
 import { DateTime } from './luxon.min.js'
-import {loadAll, showChart, setNoUTC} from './showcharts.js'
+import {loadAll} from './showcharts.js'
 import {getCurrentTab} from "./chart_utilities.js";
 
 

public/javascripts/global.js

@@ -3,10 +3,11 @@
 
 import * as map from './map.js'
 import * as dt from './datetime.js'
-import {loadAll, showChart, setNoUTC} from './showcharts.js'
+import {loadAll, showChart, setNoUTC, tabtable} from './showcharts.js'
 import { DateTime } from './luxon.min.js'
-import {setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} from "./chart_utilities.js";
+import {ttIndex, setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} from "./chart_utilities.js";
-import * as utils from "./chart_utilities.js";
+import * as spin from './spinner.js'
+
 
 (async () => {
 
@@ -22,9 +23,8 @@ import * as utils from "./chart_utilities.js";
         refreshRate: 5,
         sid: -1
     }
-    // END global variables
 
- //   localStorage.clear()
+    let minDate = new Date(2023, 0, 1)
     
     const setting = [
         {
@@ -60,6 +60,11 @@ import * as utils from "./chart_utilities.js";
             param: ['seldate']
         }   
     ]
+    // END global variables
+
+    //   localStorage.clear()
+
+
     // Check new map center
     const checkNewCenter = (oldC, newC) => {
         if((oldC[0] !== newC[0]) || (oldC[1] !== newC[1])) {
@@ -70,6 +75,7 @@ import * as utils from "./chart_utilities.js";
     // Register events
     // Button 'Save' pressed
     document.querySelector('#btnSave').addEventListener('click', async () => {
+        let curtab =  getCurrentTab()
         for(let i = 0; i < setting.length; i++) {
             if(setting[i].typ === getCurrentTab()) {
                 for(let j = 0; j < setting[i].show.length; j++) {
@@ -89,7 +95,7 @@ import * as utils from "./chart_utilities.js";
                 break
             }
         }
-        if (getCurrentTab() !== 'maptab') {
+        if (curtab !== 'maptab') {
             let starttime
             if ((params.seldate === 'today') || (params.seldate === 'heute') || (DateTime.now().toFormat('yyyy-MM-dd') === params.seldate)) {
                 starttime = ''
@@ -109,7 +115,9 @@ import * as utils from "./chart_utilities.js";
         if(newlng !== oldlng) {
             location.reload()
         }
-        await loadAll(params,0)
+        spin.spinner.spin(spin.spindiv)
+        await loadAll(params,0, curtab)
+        spin.spinner.stop()
         // ToDo:
         // Load ALL incl. MAP und LIVE hier, d.h. an loadAll einen zusätzlichen Parameter übergeben
         // if(params.sid !== undefined) {
@@ -138,8 +146,7 @@ import * as utils from "./chart_utilities.js";
             {
                 dateFormat: 'yy-mm-dd',
                 maxDate: new Date(),
-                minDate: new Date(2023, 0, 1),
+                minDate: minDate,
-                showButtonPanel: true,
             })
         )
         document.getElementById('startday').value = params.seldate
@@ -221,18 +228,25 @@ import * as utils from "./chart_utilities.js";
             triggerEl.addEventListener('click', function (event) {
                 event.preventDefault()
                 tabTrigger.show()
-                setCurrentTab(event.currentTarget.id)
+                let newtab = event.currentTarget.id
-                if (getCurrentTab() === 'maptab') {
+                setCurrentTab(newtab)
+                let tab = tabtable.find(tab => tab.id === newtab)
+                if (document.querySelector(`#${tab.id}err`).innerHTML !== '') {    // if there is an error message, clear it
+                    showError(document.querySelector(`#${tab.id}err`).innerHTML)
+                }
+                if (newtab === 'maptab') {
                     map.showMap(params)
                 }
             })
         })
         const csid = parseInt(sysparams.csid)
         if(csid !== -1) {
+            spin.spinner.spin(spin.spindiv)
             // check, if sid is of right type (noise)
             const props = await getSensorType(csid)
             if (props.type !== 'noise') {
                 // wrong sensor type
+                spin.spinner.stop()
                 showError('Sensor ID ' + csid + ' is not of type noise')
                 return
             }
@@ -242,7 +256,8 @@ import * as utils from "./chart_utilities.js";
             let tt = new bootstrap.Tab(t)
             tt.show()
             setCurrentTab('livetab')
-            let ok = await showChart(params, 'live', 'dlive')
+            let ok = await showChart(params, ttIndex.live)
+            spin.spinner.stop()
             if (ok) {
                 await loadAll(params)
             }

public/javascripts/map.js

@@ -1,8 +1,6 @@
 // all function related to the map
 
-import * as dt from './datetime.js'
 import * as utils from "./chart_utilities.js"
-import { showChart, loadAll } from './showcharts.js'
 import * as mapn from './map_noise.js'
 import * as mapg from './map_geiger.js'
 import * as mapu from './map_utilities.js'

public/javascripts/map_geiger.js

@@ -221,7 +221,7 @@ async function onMarkerClick(e, click, txts, params, mpp) {
     link.addEventListener('click', async function (ev) {
         console.log(`Event clicked: ${mpp.clickedSensor}`)
         params.sid = item.name
-        let ok = await showChart(params, 'live', 'dlive')
+        let ok = await showChart(params, utils.ttIndex.live)
         if (ok) {
             let triggerEl = document.querySelector(`#livetab`)
             bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

public/javascripts/map_noise.js

@@ -1,8 +1,9 @@
 
 import * as dt from './datetime.js'
 import * as utils from "./chart_utilities.js"
-import { showChart, loadAll } from './showcharts.js'
+import { showChart, loadAll} from './showcharts.js'
 import * as mapu from './map_utilities.js'
+import * as spin from './spinner.js'
 
 export const colorscale = ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#3288bd', '#808080'];
 const dba = [100, 80, 60, 40, 20, 0, -999];
@@ -144,8 +145,11 @@ async function onMarkerClick(e, click, txts, params, mpp) {
     link.addEventListener('click', async function (ev) {
         console.log(`Event clicked: ${mpp.clickedSensor}`)
         params.sid = item.name
+        history.pushState({}, '', `/${params.sid}`)
         utils.setCurrentTab('livetab')
-        let ok = await showChart(params, 'live', 'dlive')
+        spin.spinner.spin(spin.spindiv)
+        let ok = await showChart(params, ttIndex.live)
+        spin.spinner.stop()
         if (ok) {
             let triggerEl = document.querySelector(`#livetab`)
             bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

public/javascripts/showcharts.js

@@ -2,10 +2,10 @@ import * as utils from "./chart_utilities.js";
 import { DateTime } from './luxon.min.js'
 import * as map from "./map.js";
 import {fetchfromserver, showError} from "./chart_utilities.js";
+import * as spin from './spinner.js'
 
-// table to distribute the different charts
 export const tabtable = [
-    {id: 'kartentab', type: 'map', container: 'map', func: map.showMap, div: null, dformat: null},
+    {id: 'maptab', type: 'map', container: 'map', func: map.showMap, div: null, dformat: null},
     {id: 'livetab', type: 'live', container: 'dlive', func: showChart, div: 2, dformat: "dd.LL - HH:mm:ss"},
     {id: 'houravgtab', type: 'havg', container: 'dhour', func: showChart, div: 1, dformat: "dd.LL - HH'h'"},
     {id: 'dayavgtab', type: 'davg', container: 'dday', func: showChart, div: 1, dformat: "dd.LL"},
@@ -13,7 +13,11 @@ export const tabtable = [
     {id: 'ldentab', type: 'lden', container: 'dlden', func: showChart, div: 1, dformat: "dd.LL"},
 ]
 
-export async function showChart(params, typ, container) {
+
+export async function showChart(params, index) {
+    let container = tabtable[index].container
+    let typ = tabtable[index].type
+    let id = tabtable[index].id
     function form() {
         for (let item of tabtable) {
             if (item.type === typ) {
@@ -60,6 +64,10 @@ export async function showChart(params, typ, container) {
         url += `&peak=${params.peak}`
     }
     console.log(`fetch ${typ} from server ${url}`)
+
+    let errdiv = document.querySelector(`#${id}err`)
+    errdiv.innerHTML = ''
+
     let erg = await fetchfromserver(url)
     if(sysparams.category === 'noise') {
         utils.showTabs()
@@ -93,14 +101,12 @@ export async function showChart(params, typ, container) {
         })
         return {error: false}
     } else {
-        if(typ === 'live') {
+        errdiv.innerHTML = erg.err
-            showError(erg.err)
+        return {error: true}
-        }
-        return {error: erg.err}
     }
 }
 
-export const loadAll = async (params, start = 2) => {
+export const loadAll = async (params, start = 2, curtab = '') => {
     console.log('now load all in Background')
     let messzeit = DateTime.now()
     if (start == 0) {
@@ -109,10 +115,12 @@ export const loadAll = async (params, start = 2) => {
     }
     if (params.sid !== -1) {
         for (let i = start; i < tabtable.length; i++) {
-            let err = await showChart(params, tabtable[i].type, tabtable[i].container)
+            let err = await showChart(params, i)
-            if (err.error) {
+            if(tabtable[i].id === curtab) {
-                if(tabtable[i].type !== 'live') {   
+                spin.spinner.stop()
-                    break;
+                let errtxt = document.querySelector(`#${tabtable[i].id}err`).innerHTML
+                if (errtxt !== '') {
+                    showError(errtxt)
                 }
             }
         }

public/javascripts/spinner.js

@@ -0,0 +1,27 @@
+// Aufbau eine Spinner, der während des Ladens von AJAX-Requests angezeigt wird
+
+import { Spinner } from '/spin.js/spin.js'
+
+const  spinneropts = {
+    lines: 13, // The number of lines to draw
+    length: 38, // The length of each line
+    width: 17, // The line thickness
+    radius: 45, // The radius of the inner circle
+    scale: 1, // Scales overall size of the spinner
+    corners: 1, // Corner roundness (0..1)
+    speed: 1, // Rounds per second
+    rotate: 0, // The rotation offset
+    animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
+    direction: 1, // 1: clockwise, -1: counterclockwise
+    color: '#404040', // CSS color or array of colors
+    fadeColor: 'transparent', // CSS color or array of colors
+    top: '50%', // Top position relative to parent
+    left: '50%', // Left position relative to parent
+    shadow: '0 0 1px transparent', // Box-shadow for the lines
+    zIndex: 2000000000, // The z-index (defaults to 2e9)
+    className: 'spinner', // The CSS class to assign to the spinner
+    position: 'absolute', // Element positioning
+  };
+  
+export const spinner = new Spinner(spinneropts)  
+export const spindiv = document.getElementById('spinner')

public/stylesheets/style.css

@@ -5,6 +5,7 @@ body {
   margin-left: auto;
   margin-right: auto;
   height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
 }
 
 html {
@@ -271,4 +272,8 @@ footer #author #versn {
 
 .highcharts-container {
   margin-top: -10px;
+}
+
+.errdiv {
+  display: none;
 }/*# sourceMappingURL=style.css.map */

public/stylesheets/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.sass","style.css"],"names":[],"mappings":"AAYA;EACE,uDAAA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;EACA,YAAA;ACXF;;ADcA;EACE,YAAA;ACXF;;ADaA;EACE,YAAA;EACA,WAAA;EACA,kBAAA;EAEA,eAAA;EACA,YAAA;EACA,kBAAA;ACXF;;ADaA;EACE,cAAA;ACVF;;ADYA;EACE,2BA9BoB;ACqBtB;ADWE;EACE,uBAAA;EACA,iBAAA;EACA,oBAAA;EACA,cAAA;ACTJ;ADWE;EACE,eAAA;EACA,WAAA;EACA,WAAA;EACA,gBAAA;ACTJ;ADWE;EACE,YAAA;EACA,gBAAA;ACTJ;ADUI;EACE,kBAAA;ACRN;ADSI;EACE,kBAAA;ACPN;ADQI;EACE,YAAA;EACA,eAAA;ACNN;;ADQA;EACE,kBAAA;EACA,iBAAA;EACA,gBAAA;EACA,WAAA;ACLF;ADOE;EACE,WAAA;EACA,kBAAA;ACLJ;;ADOA;EACE,kBAAA;EACA,iBAAA;EACA,WAAA;EACA,YAAA;EACA,mBA7Ec;EA8Ed,0BAAA;EACA,gBAAA;EACA,UAAA;ACJF;ADME;EACE,YAAA;EACA,kBAAA;EACA,uBAAA;ACJJ;ADKE;EACE,gBAAA;EACA,kBAAA;ACHJ;;ADMA;EACE,WAAA;EACA,cAAA;EACA,sBAAA;EACA,cAAA;ACHF;ADKE;EACE,UAAA;EACA,WAAA;ACHJ;ADIE;EACE,gBAAA;EACA,gBAAA;ACFJ;;ADIA;EACE,2BAlGoB;ACiGtB;ADGE;EACE,cAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,iBAAA;EACA,YAAA;ACDJ;ADGI;EACE,WAAA;ACDN;ADGI;EACE,YAAA;ACDN;;ADIA;EACE,gBAAA;EACA,uCAAA;EACA,oCAAA;EACA,uCAAA;EACA,kBAAA;ACDF;;ADGA;EACE,eAAA;EACA,WAAA;ACAF;;ADEA;EACE,iBAAA;EACA,WAAA;EACA,eAAA;ACCF;;ADCA;EACE,WAAA;EACA,YAAA;EACA,WAAA;EACA,iBAAA;EACA,UAAA;ACEF;;ADAA;EACE,iBAAA;ACGF;;ADDA;EACE,kBAAA;EACA,eAAA;ACIF;;ADFA;EACE,gBAAA;ACKF;;ADHA;EACE,WAAA;EACA,YAAA;EACA,YAAA;ACMF;;ADJA;EACE,UAAA;ACOF;;ADLA;EACE,qBAAA;ACQF;;ADNA;EACE,SAAA;ACSF;;ADNA;EACE,gBAAA;ACSF;;ADPA;EACE,UAAA;EACA,WAAA;ACUF;;ADPA;EAEE,WAAA;ACSF;;ADNA;EACE,WAAA;EACA,cAAA;ACSF;;ADPA;EACE,WAAA;EACA,qBAAA;EACA,mBAAA;ACUF;;ADRA;EACE,UAAA;ACWF;;ADTA;EACE,UAAA;ACYF;;ADVA;EACE,UAAA;EACA,sBAAA;ACaF;;ADXA;EACE,cAAA;ACcF;;ADZA;EACE,YAAA;EACA,gBAAA;EACA,eAAA;EACA,uBAAA;EACA,0CAAA;ACeF;;ADbA;EACE,kBAAA;ACgBF;;ADdA;EACE,YAAA;ACiBF;;ADfA;EACE;IACE,aAAA;ECkBF;AACF;ADjBA;EACE,yBArNa;EAsNb,WAAA;ACmBF;;ADjBA;EACE,cAzNa;EA0Nb,yBAAA;ACoBF;;ADjBA;EACE,aAAA;ACoBF;;ADfA;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;ACkBF;;ADhBA;EACE,iBAAA;EACA,mBAAA;ACmBF;;ADjBA;EACE,eAAA;EACA,iBAAA;ACoBF;;ADjBA;EACE,iBAAA;ACoBF","file":"style.css"}
+{"version":3,"sources":["style.sass","style.css"],"names":[],"mappings":"AAYA;EACE,uDAAA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;ACXF;;ADaA;EACE,YAAA;ACVF;;ADYA;EACE,YAAA;EACA,WAAA;EACA,kBAAA;EAEA,eAAA;EACA,YAAA;EACA,kBAAA;ACVF;;ADYA;EACE,cAAA;ACTF;;ADWA;EACE,2BA9BoB;ACsBtB;ADUE;EACE,uBAAA;EACA,iBAAA;EACA,oBAAA;EACA,cAAA;ACRJ;ADUE;EACE,eAAA;EACA,WAAA;EACA,WAAA;EACA,gBAAA;ACRJ;ADUE;EACE,YAAA;EACA,gBAAA;ACRJ;ADSI;EACE,kBAAA;ACPN;ADQI;EACE,kBAAA;ACNN;ADOI;EACE,YAAA;EACA,eAAA;ACLN;;ADOA;EACE,kBAAA;EACA,iBAAA;EACA,gBAAA;EACA,WAAA;ACJF;ADME;EACE,WAAA;EACA,kBAAA;ACJJ;;ADMA;EACE,kBAAA;EACA,iBAAA;EACA,WAAA;EACA,YAAA;EACA,mBA7Ec;EA8Ed,0BAAA;EACA,gBAAA;EACA,UAAA;ACHF;ADKE;EACE,YAAA;EACA,kBAAA;EACA,uBAAA;ACHJ;ADIE;EACE,gBAAA;EACA,kBAAA;ACFJ;;ADKA;EACE,WAAA;EACA,cAAA;EACA,sBAAA;EACA,cAAA;ACFF;ADIE;EACE,UAAA;EACA,WAAA;ACFJ;ADGE;EACE,gBAAA;EACA,gBAAA;ACDJ;;ADGA;EACE,2BAlGoB;ACkGtB;ADEE;EACE,cAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,iBAAA;EACA,YAAA;ACAJ;ADEI;EACE,WAAA;ACAN;ADEI;EACE,YAAA;ACAN;;ADGA;EACE,gBAAA;EACA,uCAAA;EACA,oCAAA;EACA,uCAAA;EACA,kBAAA;ACAF;;ADEA;EACE,eAAA;EACA,WAAA;ACCF;;ADCA;EACE,iBAAA;EACA,WAAA;EACA,eAAA;ACEF;;ADAA;EACE,WAAA;EACA,YAAA;EACA,WAAA;EACA,iBAAA;EACA,UAAA;ACGF;;ADDA;EACE,iBAAA;ACIF;;ADFA;EACE,kBAAA;EACA,eAAA;ACKF;;ADHA;EACE,gBAAA;ACMF;;ADJA;EACE,WAAA;EACA,YAAA;EACA,YAAA;ACOF;;ADLA;EACE,UAAA;ACQF;;ADNA;EACE,qBAAA;ACSF;;ADPA;EACE,SAAA;ACUF;;ADPA;EACE,gBAAA;ACUF;;ADRA;EACE,UAAA;EACA,WAAA;ACWF;;ADRA;EAEE,WAAA;ACUF;;ADPA;EACE,WAAA;EACA,cAAA;ACUF;;ADRA;EACE,WAAA;EACA,qBAAA;EACA,mBAAA;ACWF;;ADTA;EACE,UAAA;ACYF;;ADVA;EACE,UAAA;ACaF;;ADXA;EACE,UAAA;EACA,sBAAA;ACcF;;ADZA;EACE,cAAA;ACeF;;ADbA;EACE,YAAA;EACA,gBAAA;EACA,eAAA;EACA,uBAAA;EACA,0CAAA;ACgBF;;ADdA;EACE,kBAAA;ACiBF;;ADfA;EACE,YAAA;ACkBF;;ADhBA;EACE;IACE,aAAA;ECmBF;AACF;ADlBA;EACE,yBArNa;EAsNb,WAAA;ACoBF;;ADlBA;EACE,cAzNa;EA0Nb,yBAAA;ACqBF;;ADlBA;EACE,aAAA;ACqBF;;ADhBA;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;ACmBF;;ADjBA;EACE,iBAAA;EACA,mBAAA;ACoBF;;ADlBA;EACE,eAAA;EACA,iBAAA;ACqBF;;ADnBA;EACE,iBAAA;ACsBF;;ADpBA;EACE,aAAA;ACuBF","file":"style.css"}

public/stylesheets/style.sass

@@ -17,7 +17,7 @@ body
   margin-left: auto
   margin-right: auto
   height: 100%
-//  background-color: $background
+  background-color: rgba(0,0,0,0.9)
 
 html
   height: 100%
@@ -251,3 +251,7 @@ footer
 
 .highcharts-container
   margin-top: -10px
+
+.errdiv 
+  display: none
+

views/index_noise.pug

@@ -10,6 +10,7 @@ block content
         #h1datum
 
   #fenster
+    #spinner
     #navi
       ul.nav.nav-tabs#tablist
         li.nav-item(role='presentation')
@@ -27,19 +28,25 @@ block content
     .tab-content#thetabs
       .tab-pane.fade.show.active#t_map(role="tabpanel" aria-labelledby="map-tab")
         #map
+        #maptaberr.errdiv
         #mapdateactsens
           #actsensors
           #mapdate
       .tab-pane.fade#t_live(role="tabpanel" aria-labelledby="live-tab")
         #dlive 
+        #livetaberr.errdiv
       .tab-pane.fade#t_houravg(role="tabpanel" aria-labelledby="map-tab")
         #dhour
+        #houravgtaberr.errdiv
       .tab-pane.fade#t_dayavg(role="tabpanel" aria-labelledby="map-tab")
         #dday
+        #dayavgtaberr.errdiv
       .tab-pane.fade#t_daynight(role="tabpanel" aria-labelledby="map-tab")
-        #ddaynight  DayNightTAB
+        #ddaynight
+        #daynighttaberr.errdiv
       .tab-pane.fade#t_lden(role="tabpanel" aria-labelledby="map-tab")
         #dlden
+        #ldentaberr.errdiv
 
 
   // Error-Dialog

views/layout.pug

@@ -11,6 +11,7 @@ html
       crossorigin="")
     link(rel='stylesheet', href='/stylesheets/MarkerCluster.css')
     link(rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css")
+    link(rel='stylesheet', href='/spin.js/spin.css')
 
 
     script.