src/app/pages/home/component/visualization-card-loader/visualization-card-loader.component.css
.visualization-card-loader-container {
width: 100%;
overflow: auto;
}
.loader-block {
position: absolute;
top: 5%;
bottom: 20px;
width: 100%;
}
.chart-loader,
.map-loader {
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
width: 100%;
}
.chart-loader div {
margin-left: 1%;
margin-right: 1%;
width: 40%;
}
.table-loader {
margin-left: 1%;
margin-right: 1%;
width: 98%;
}
.table-loader td {
padding: 2px;
height: 9%;
}
.map-image {
-webkit-clip-path: polygon(
46% 7%,
52% 7%,
59% 10%,
62% 15%,
62% 20%,
59% 26%,
65% 30%,
67% 35%,
72% 38%,
79% 38%,
84% 36%,
87% 41%,
87% 46%,
85% 52%,
81% 54%,
75% 57%,
75% 64%,
79% 69%,
82% 75%,
82% 81%,
80% 85%,
74% 89%,
70% 93%,
65% 93%,
58% 93%,
51% 93%,
44% 93%,
37% 90%,
31% 87%,
25% 86%,
21% 90%,
17% 93%,
11% 94%,
5% 91%,
2% 83%,
2% 73%,
5% 65%,
11% 58%,
16% 59%,
21% 65%,
24% 60%,
21% 55%,
18% 52%,
12% 49%,
8% 51%,
2% 55%,
0% 48%,
0% 41%,
0% 36%,
4% 31%,
7% 26%,
7% 19%,
8% 13%,
13% 9%,
21% 4%,
29% 3%,
38% 3%
);
clip-path: polygon(
46% 7%,
52% 7%,
59% 10%,
62% 15%,
62% 20%,
59% 26%,
65% 30%,
67% 35%,
72% 38%,
79% 38%,
84% 36%,
87% 41%,
87% 46%,
85% 52%,
81% 54%,
75% 57%,
75% 64%,
79% 69%,
82% 75%,
82% 81%,
80% 85%,
74% 89%,
70% 93%,
65% 93%,
58% 93%,
51% 93%,
44% 93%,
37% 90%,
31% 87%,
25% 86%,
21% 90%,
17% 93%,
11% 94%,
5% 91%,
2% 83%,
2% 73%,
5% 65%,
11% 58%,
16% 59%,
21% 65%,
24% 60%,
21% 55%,
18% 52%,
12% 49%,
8% 51%,
2% 55%,
0% 48%,
0% 41%,
0% 36%,
4% 31%,
7% 26%,
7% 19%,
8% 13%,
13% 9%,
21% 4%,
29% 3%,
38% 3%
);
display: table;
margin: auto;
width: 350px;
}
.loading-text {
position: absolute;
bottom: 0;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.loading-text img {
height: 40px;
}
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.animated-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
height: 100%;
position: relative;
}