#ustYukleme {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    display: flex;
    height: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
#ustYukleme span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--main-color, #304B6D);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px rgba(48, 75, 109, .45);
}
#ustYukleme.calisiyor {
    opacity: 1;
}
#ustYukleme.calisiyor span {
    animation: ustYuklemeIlerle 8s cubic-bezier(.1, .7, .3, 1) forwards;
}
#ustYukleme.bitti span {
    width: 100%;
    animation: none;
    transition: width .25s ease-out;
}
#ustYukleme.bitti {
    opacity: 0;
    transition: opacity .3s .2s;
}
@keyframes ustYuklemeIlerle {
    from {
        width: 0;
    }
    to {
        width: 90%;
    }
}