Commit 0ac1dacb authored by Jan Dillenberger's avatar Jan Dillenberger

Add loading animation for Charts

parent 9c54b425
Pipeline #22072 canceled with stage
......@@ -63,3 +63,50 @@
top: 100%;
left: 0;
}
/* Loading Animation */
.chartloader {
width: 12em !important;
margin: auto;
padding-top: 1em;
padding-bottom: 1em;
width: 100%;
}
.lds-ring {
display: inline-block;
position: relative;
width: 10em;
height: 10em;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 90%;
height: 90%;
margin: 5%;
border: 15px solid transparent;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #749EF2 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
......@@ -92,15 +92,16 @@ function hookChart(elementClass, drawGroupChart, options = {}) {
let elements = document.getElementsByClassName(elementClass)
let url, buttonBox, i = 0
Array.prototype.forEach.call(elements, htmlElement => {
htmlElement.innerHTML = ''
htmlElement.innerHTML = '<div class="chartloader" ><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>'
url = Fetcher.buildURL(select(htmlElement).attr('evaluation_id'))
Fetcher.getJSON(url).then(response => {
/*htmlElement.innerHTML = ''
if ( !("hide_buttons" in options && options.hide_buttons) ) {
buttonBox = drawButtons(htmlElement, response, drawGroupChart, options)
buttonBox.firstChild.click()
} else {
makeChart(htmlElement, response, response.subScales[0].groupResults[0].group, drawGroupChart)
}
}*/
}, error => console.log(error))
})
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment