Skip to content
Snippets Groups Projects
Commit e21399d0 authored by Thomas Dondorf's avatar Thomas Dondorf
Browse files

Replaced loading indicator

Reason: Possible license problems
parent e44d036e
No related branches found
No related tags found
No related merge requests found
......@@ -117,7 +117,7 @@ $resultinghtml = router::run($_SERVER['REQUEST_URI']);
$output = $PAGE->get_renderer('local_learning_analytics');
$PAGE->requires->css('/local/learning_analytics/static/styles.css?3');
$PAGE->requires->css('/local/learning_analytics/static/styles.css?4');
$mainoutput = $output->render_from_template('local_learning_analytics/course', [
'content' => $resultinghtml
]);
......
static/loading-indicator.gif

6.1 KiB

<link rel="stylesheet" type="text/css" href="./style.css" />
<div class="loader"></div>
<pre>
This page is used to create the loading indicator image. As old browsers and even new ones struggle with
complex CSS animations like box-shadow, it's better to create a GIF from this animation and reference that.
That's exactly what was done here. To change the loading indicator, record the animation and save it as GIF.
I used https://www.screentogif.com/ for that.
Reason to create our own loading indicator is that most indicator GIFs out there are not compatible with the
GPL license.
</pre>
\ No newline at end of file
.loader {
width: 6px;
height: 6px;
animation: loadinganim 1s linear normal infinite;
position: relative;
left: 100px;
border-radius: 50%;
margin: 50px;
font-size: 6px;
}
@keyframes loadinganim {
0% {
box-shadow:
-6em 2em 0 0.2em #000,
-4em 2em 0 0 #ccc,
-2em 2em 0 0 #ccc,
0 2em 0 0 #ccc,
2em 2em 0 0 #ccc,
4em 2em 0 0 #ccc,
6em 2em 0 0 #ccc;
}
14.3% {
box-shadow:
-6em 2em 0 0 #ccc,
-4em 2em 0 0.2em #000,
-2em 2em 0 0 #ccc,
0 2em 0 0 #ccc,
2em 2em 0 0 #ccc,
4em 2em 0 0 #ccc,
6em 2em 0 0 #ccc;
}
28.6% {
box-shadow:
-6em 2em 0 0 #ccc,
-4em 2em 0 0 #ccc,
-2em 2em 0 0.2em #000,
0 2em 0 0 #ccc,
2em 2em 0 0 #ccc,
4em 2em 0 0 #ccc,
6em 2em 0 0 #ccc;
}
42.85% {
box-shadow:
-6em 2em 0 0 #ccc,
-4em 2em 0 0 #ccc,
-2em 2em 0 0 #ccc,
0 2em 0 0.2em #000,
2em 2em 0 0 #ccc,
4em 2em 0 0 #ccc,
6em 2em 0 0 #ccc;
}
57.15% {
box-shadow:
-6em 2em 0 0 #ccc,
-4em 2em 0 0 #ccc,
-2em 2em 0 0 #ccc,
0 2em 0 0 #ccc,
2em 2em 0 0.2em #000,
4em 2em 0 0 #ccc,
6em 2em 0 0 #ccc;
}
71.4% {
box-shadow:
-6em 2em 0 0 #ccc,
-4em 2em 0 0 #ccc,
-2em 2em 0 0 #ccc,
0 2em 0 0 #ccc,
2em 2em 0 0 #ccc,
4em 2em 0 0.2em #000,
6em 2em 0 0 #ccc;
}
85.7% {
box-shadow:
-6em 2em 0 0 #ccc,
-4em 2em 0 0 #ccc,
-2em 2em 0 0 #ccc,
0 2em 0 0 #ccc,
2em 2em 0 0 #ccc,
4em 2em 0 0 #ccc,
6em 2em 0 0.2em #000;
}
100% {
box-shadow:
-6em 2em 0 0.2em #000,
-4em 2em 0 0 #ccc,
-2em 2em 0 0 #ccc,
0 2em 0 0 #ccc,
2em 2em 0 0 #ccc,
4em 2em 0 0 #ccc,
6em 2em 0 0 #ccc;
}
}
static/loading-indicator2.gif

3.02 KiB

......@@ -87,7 +87,7 @@ table.generaltable.latable.quiztable td.c0 {
/* loading animation */
.plotly-wrapper {
background-image: url('./loading-indicator.gif');
background-image: url('./loading-indicator2.gif');
background-position: center center;
background-repeat: no-repeat;
overflow:hidden;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment