.loading-area{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100vh;
    background:#171f2c;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

/* Square Box */
.graph-loader{
    width:100px;
    height:100px;
    /*background:white;*/
    /*border-radius:20px;*/
    /*box-shadow:0 15px 40px rgba(0,0,0,0.08);*/
    display:flex;
    justify-content:center;
    align-items:flex-end;
    padding:25px;
    overflow:hidden;
}

/* Graph Bars */
.graph-bars{
    width:100%;
    height:70px;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:8px;
}

.graph-bars span{
    width:18px;
    border-radius:10px 10px 0 0;
    background:linear-gradient(to top,#ff6f00,#ffb300);
    transform-origin:bottom;
    animation:stockMove 2.5s ease-in-out infinite;
}

/* Different Heights */
.graph-bars span:nth-child(1){
    height:30px;
    animation-delay:0s;
}

.graph-bars span:nth-child(2){
    height:40px;
    animation-delay:0.2s;
}

.graph-bars span:nth-child(3){
    height:50px;
    animation-delay:0.4s;
}

.graph-bars span:nth-child(4){
    height:80px;
    animation-delay:0.6s;
}

.graph-bars span:nth-child(5){
    height:70px;
    animation-delay:0.8s;
}

.graph-bars span:nth-child(6){
    height:90px;
    animation-delay:1s;
}

.graph-bars span:nth-child(7){
    height:60px;
    animation-delay:1.2s;
}

/* Smooth Up-Down Animation */
@keyframes stockMove{
    0%{
        transform:scaleY(0.4);
    }
    25%{
        transform:scaleY(1);
    }
    50%{
        transform:scaleY(1.4);
    }
    75%{
        transform:scaleY(0.8);
    }
    100%{
        transform:scaleY(0.4);
    }
}