Multiscrape with Amerigas propane supplier site

Configuration
8

I have a few alternative cards to share.

This one changes color based on percentage:
image

entities:
  - entity: sensor.amerigas_multiscrape_raw
    name: Propane Tank Level
    icon: mdi:propane-tank
decimal: 1
max: 100
min: 10
severity:
  - color: '#0080FF'
    from: '81'
    to: '100'
  - color: '#40bf40'
    from: '31'
    to: '80'
  - color: '#bf9540'
    from: '21'
    to: '30'
  - color: '#c0392b'
    from: '0'
    to: '20'
direction: up
height: 150px
width: 200px
speed: '2'
positions:
  indicator: outside
style: |-
  .card-header {
    font-size: 18px;
  }
  bar-card-value, bar-card-name {
    font-size: 12px;
    transform-origin: 0 0;
    transform: rotate(270deg);
    text-shadow: 1px 1px #0008;
    white-space: nowrap;
  }
  bar-card-value {
    margin-right: auto;
    margin-left: 6px;
    margin-bottom: auto;
    margin-top: auto;
  }
  bar-card-name {
    margin-right: auto;
    margin-left: 0px;
    margin-bottom: -130px;
    margin-top: 130px;
    right: 20px;
  }
  bar-card-currentbar, bar-card-backgroundbar {
    border-radius: 12px;
    border: 1px solid #DDD9;
  }
stack: horizontal
type: custom:bar-card

This one displays the top of the shading flowing like fluid.

image

type: custom:fluid-level-background-card
card:
  show_name: true
  show_icon: true
  show_state: true
  type: glance
  state_color: true
  entities:
    - entity: sensor.amerigas_multiscrape_raw
      icon: mdi:propane-tank
  columns: 1
  title: Propane Tank Level
level_color:
  - 0
  - 191
  - 255
entity: sensor.amerigas_multiscrape_raw