1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| @{alain-default-prefix}__progress-bar {
| width: 100vw;
| height: 4px;
| overflow: hidden;
| background: fade(#ddd, 40%);
| position: fixed;
| z-index: @zindex-base + 20;
| &::after {
| content: ' ';
| height: 100%;
| width: 33.3vw;
| animation: gradcolours 5s steps(1) infinite, loadthird 1s infinite linear;
| display: block;
| transform-origin: top left;
| }
| }
|
| .grad(@hex) {
| background:
| linear-gradient(
| 90deg,
| fade(@hex, 0) 0%,
| @hex 30%,
| @hex 50%,
| @hex 70%,
| fade(@hex, 0) 100%
| );
| }
|
| @keyframes loadthird {
| 0% { transform: translateX(-33.3vw); }
| 100% { transform: translateX(100vw); }
| }
|
| @keyframes gradcolours {
| 0% { .grad(#e88098); }
| 20% { .grad(#84bebe); }
| 40% { .grad(#e98724); }
| 60% { .grad(#afc94e); }
| 80% { .grad(#6297a4); }
| }
|
|
