Add OPT branded load indicator (CC-87)
parent
ec2beb56a0
commit
8304dc1a0e
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "opt-cc",
|
||||
"version": "1.9.1",
|
||||
"version": "1.9.2",
|
||||
"author": "Florian Hartwich <hardi@noarch.de>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ li {
|
|||
}
|
||||
|
||||
#scrollTopBtn:hover {
|
||||
background: rgba(16, 16, 16);
|
||||
background: #101010;
|
||||
}
|
||||
|
||||
.unprocessed {
|
||||
|
|
|
|||
|
|
@ -137,7 +137,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
|
||||
<div *ngIf="loading" class="load-indicator">
|
||||
<div class="opt-loader"></div>
|
||||
<mat-icon svgIcon="opt-logo-core" class="opt-logo-core"></mat-icon>
|
||||
</div>
|
||||
|
||||
|
||||
<button mat-icon-button
|
||||
mat-mini-fab
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export class AppComponent implements OnInit {
|
|||
// to load from assets/icon folder
|
||||
svgIcons = {
|
||||
'opt-logo': 'general/opt-logo',
|
||||
'loading-arrows': 'general/loading-arrows',
|
||||
'opt-logo-core': 'general/opt-logo-core',
|
||||
'add': 'outline-add_box-24px',
|
||||
'add-user': 'twotone-person_add-24px',
|
||||
'award': 'award',
|
||||
|
|
|
|||
|
|
@ -3,47 +3,58 @@
|
|||
top: 50%;
|
||||
z-index: 10000;
|
||||
left: 46%;
|
||||
filter: drop-shadow(3px 1px 2px #dadada);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
filter: drop-shadow(3px 1px 2px #666666);
|
||||
}
|
||||
|
||||
.opt-loader {
|
||||
border: 3px solid #666666;
|
||||
border-top: 3px solid #dadada;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: spin 2s linear infinite, fade 2s linear infinite;
|
||||
}
|
||||
|
||||
.opt-logo-core {
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
margin: 6px 8px;
|
||||
stroke: #666666;
|
||||
color: #dadada;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.load-indicator {
|
||||
left: 47.4%;
|
||||
left: 46.1%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1376px) {
|
||||
.load-indicator {
|
||||
left: 48%;
|
||||
left: 46.55%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1600px) {
|
||||
.load-indicator {
|
||||
left: 48.2%;
|
||||
left: 47.45%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1925px) {
|
||||
.load-indicator {
|
||||
left: 48.7%;
|
||||
left: 48.1%;
|
||||
}
|
||||
}
|
||||
|
||||
.load-arrow {
|
||||
background: url(../../assets/icon/general/loading-arrows.svg) no-repeat;
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
/* Loading Animation */
|
||||
.glyphicon-refresh-animate {
|
||||
animation: spin 1.5s linear infinite;
|
||||
@keyframes fade {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
0% { transform: rotate(0deg) }
|
||||
100% { transform: rotate(360deg) }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="70px" height="70px" version="1.1" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0.25 34.88c0-3.06 0.25-6.77 0.94-9.69 2.43-10.28 12.69-20.77 22.75-23.75 3.65-1.09 5.7-0.92 11.12-1.19 3.64 0.02 10.15 0.2 16.63 3.81 2.22 1.24 8 5.32 10.31 7.44 1.69-1.38 6.06-6.12 8-7.5l-0.06 21.75s-22.13 0.37-22.13 0.37 7.13-7.31 7.13-7.31c-5.69-4.69-10.77-8.5-17.94-9.33-3.4-0.4-8.56-1.04-15 2.96-5.63 3.87-7.5 5.87-10.38 10.87-2.75 6.88-2.18 8.94-2.62 11.69l-8.75-0.12zm-0.25 8.12m69.75-7.88c0 3.06-0.25 6.77-0.94 9.69-2.43 10.28-12.69 20.77-22.75 23.75-3.65 1.09-5.7 0.92-11.12 1.19-3.64-0.02-10.15-0.2-16.63-3.81-2.22-1.24-8-5.32-10.31-7.44-1.69 1.38-6.06 6.12-8 7.5l0.06-21.75s22.13-0.37 22.13-0.37-7.13 7.31-7.13 7.31c5.69 4.69 10.77 8.5 17.94 9.33 3.4 0.4 8.56 1.04 15-2.96 5.62-3.87 7.5-5.87 10.38-10.87 2.74-6.88 2.18-8.94 2.62-11.69l8.75 0.12zm0.25-8.12"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 929 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="2.3in" height="2.2in" version="1.1" viewBox="0 0 168 160" xmlns="http://www.w3.org/2000/svg"><path id="Selection" d="m85 4c5.5 42 15 65 26 104 5-1.7 9.1-2.7 13-7 4.1-5.2 3.1-12 2.1-18-1.8-11-14-34-20-44-3-4.8-6.6-9.5-8.3-15 0 0-0.39-1.6 1-1 6.8 3.5 16 17 21 23 13 18 28 44 28 66-0.13 7.5-1.5 9-3 11-2.5 2.6-3.3 2.6-11 1.7l-20-4.7c0 6.8 0.47 12-2.3 18-7.6 18-28 23-41 8.8-7.8-7.7-10-18-10-29-4.8 2.2-9.8 4.2-15 5.3-8 1.8-21 3.4-24-6.3-0.81-2.3-0.76-5.6-0.71-8 0.48-21 18-50 31-66 4.8-6.2 12-17 19-19-1.7 5.4-5.3 10-8.3 15l-6.5 11c-6.5 11-14 27-15 40-0.56 7.9 3.2 14 11 17 3.3 1.1 5.6 1.2 9 1.2 0-8.2 0.04-13 3.1-21 0.76-2 2.3-5.8 4.3-6.8 4.2-2.1 5 9.4 5.5 12 3 15 7.8 30 16 43l-8.6-31c-6.2-22-11-51-7.2-73 1.7-9.8 3.9-19 9.8-27 0.19-0.31 2.6-2.9 3 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 771 B |
Loading…
Reference in New Issue