ghostfolio/apps/client/src/app/components/fear-and-greed-index/fear-and-greed-index.component.html

<div class="position-relative">
  <div class="align-items-center d-flex flex-row" [hidden]="!fearAndGreedIndex">
    <div class="h2 mb-0 mr-2">{{ fearAndGreedIndexEmoji }}</div>
    <div>
      <div class="h4 mb-0">
        <span class="mr-2">{{ fearAndGreedIndexText }}</span>
        <small class="text-muted"
          ><strong>{{ fearAndGreedIndex | number: '1.0-0' }}</strong
          >/100</small
        >
      </div>
      <small class="d-block" i18n>Current Market Mood</small>
    </div>
  </div>
  @if (!fearAndGreedIndex) {
    <ngx-skeleton-loader
      animation="pulse"
      class="position-absolute w-100"
      [theme]="{
        height: '100%'
      }"
    />
  }
</div>