Style ajax progress bar

Tips and Tricks
#1

Hello, I wanted to update on how to style the ajax progress bar, since I only found not up to date sources.

Well, it’s easy:

.oc-progress-bar {
    background: #######;
}

Here’d be the whole CSS from OC:

.oc-progress-bar {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    height: 3px;
    background: #0076ff;
    z-index: 9999;
    transition: width 300ms ease-out,
    opacity 150ms 150ms ease-in;
    transform: translate3d(0, 0, 0);
}

Maybe it makes also sense to override the height in some cases.

2 Likes