search

CodeByZach / pace

Automatically add a progress bar to your site.
https://codebyzach.github.io/pace/
MIT License
15.65k stars 1.91k forks source link

Request Overlay #527

Open BackuPs opened 2 years ago

BackuPs commented 2 years ago

Please add a overlay with color to the loader. Like this

http://champion.backupsdemo.nl/features

You can click on the various top level menu items and see a differenty loader with different colors each time.

It would be nice if the overlay is part of the plugin. I also added 3 more themes. If you want i can send those to you.

ranma2913 commented 2 years ago

Hi, we added our own easily with just CSS. add this class in your project:

.pace.pace-active {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 0.7;
    background-color: #fff;
    /* signed integer max value */
    z-index: 2147483647;
}

.pace {
    pointer-events: fill !important;
}
BackuPs commented 2 years ago

Hi

Thank you for the reply. This is a nice solution but it does not work as many effects will fail now... I stopped testing after i found 3 which did not work. See images.

afbeelding

afbeelding

afbeelding

All these effects css will have to be rewritten. So without the correct effect css it is not the correct way to go. My solution works better with the seperate wrapper.