hisptz/90-90-90-cascade-graph-widget

View on GitHub
src/app/pages/home/component/visualization-card-loader/visualization-card-loader.component.css

Summary

Maintainability
Test Coverage
.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;
  }