diff --git a/script.js b/script.js index 3b77b76..3d6a029 100644 --- a/script.js +++ b/script.js @@ -74,6 +74,7 @@ if (entityschema_conditions.some(el => document.location.pathname.includes(el))) let entityschema_entity_html = '
'; entityschema_entity_html += ''; entityschema_entity_html += ''; + entityschema_entity_html += '' entityschema_entity_html += ''; entityschema_entity_html += '
'; $(entityschema_entity_html).insertAfter("#siteSub"); @@ -125,6 +126,9 @@ function entityschema_checkEntity(entity, entitySchema, language) { type: "GET", dataType: "json", url: url, + beforeSend: function() { + $(".entityshape-spinner").show(); + }, success: function(data){ let html = ""; for (let i = 0; i < data.schema.length; i++ ) { @@ -309,6 +313,7 @@ function entityschema_checkEntity(entity, entitySchema, language) { html += ''; $("#entityschemaResponse" ).append( html ); + $(".entityshape-spinner").hide(); }, error: function(data) { $("#entityschemaResponse").append( 'Unable to validate schema' ); @@ -344,6 +349,23 @@ function entityschema_getStylesheet() { stylesheet += ".absent .entityschema-missing { display: none;}"; stylesheet += ".absent a.is_entityschema-missing { display: none;}"; stylesheet += ".entityschema-span { color: #ffffff; padding:2px; margin: 2px; font-size:75%; border-radius:2px; }"; + stylesheet += ".entityshape-spinner,.entityshape-spinner div,.entityshape-spinner div:after {box-sizing: border-box;}" + stylesheet += ".entityshape-spinner { padding-top:5px; padding-bottom:5px; color: currentColor; display: inline-block; position: relative; width: 20px; height: 20px;}" + stylesheet += ".entityshape-spinner div { transform-origin: 10px 10px; animation: entityshape-spinner 1.2s linear infinite;}" + stylesheet += '.entityshape-spinner div:after { content: " "; display: block; position: absolute; top: 0.8px; left: 9.2px; width: 1.6px; height: 4.4px; border-radius: 20%; background: currentColor;}' + stylesheet += ".entityshape-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s;}" + stylesheet += ".entityshape-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s;}" + stylesheet += ".entityshape-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s;}" + stylesheet += ".entityshape-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s;}" + stylesheet += ".entityshape-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s;}" + stylesheet += ".entityshape-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s;}" + stylesheet += ".entityshape-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s;}" + stylesheet += ".entityshape-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s;}" + stylesheet += ".entityshape-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s;}" + stylesheet += ".entityshape-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s;}" + stylesheet += ".entityshape-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s;}" + stylesheet += ".entityshape-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s;}" + stylesheet += "@keyframes entityshape-spinner { 0% { opacity: 1; } 100% { opacity: 0; }}" return stylesheet; } }());