.scroll-position-indicator {
    position: fixed;
    top: 0;
    left: 0;
    height: 10px;
    width: 0px;
    background-color: #FF4A10;
    z-index: 999;
    opacity: 0;
    transition: background-color 1s ease-in-out;
}
    .scroll-position-indicator.appear {
        opacity: 1;
    }
    .scroll-position-indicator.yellow {
        background-color: #FFC011;
    }
    .scroll-position-indicator.blue {
        background-color: #88D8FF;
    }
    .scroll-position-indicator.red {
        background-color: #BB1200;
    }
    .scroll-position-indicator.white {
        background-color: #fff;
    }
    .scroll-position-indicator.green {
        background-color: #00771E;
    }
    .scroll-position-indicator.gold {
        background-color: #995E00;
    }