Full screen throbber with overlay

Public

Get raw version
css
  1. .custom-block-class .ajax-progress .message,
  2. .custom-block-class .ajax-progress-throbber .message{
  3. color: white;
  4. font-size: 20px;
  5. padding: 30px;
  6. }
  7. .custom-block-class .ajax-progress .throbber,
  8. .custom-block-class .ajax-progress-throbber .throbber {
  9. float: none;
  10. margin: 250px auto 0 auto;
  11. width: 128px;
  12. height: 128px;
  13. background: url("../i/custom-throbber-image.gif") no-repeat center center;
  14. }
  15. .custom-block-class .ajax-progress,
  16. .custom-block-class .ajax-progress-throbber {
  17. width: 100%;
  18. height: 100%;
  19. background-color: rgba(0, 0, 0, 0.5);
  20. position: fixed;
  21. top: 0;
  22. left: 0;
  23. z-index: 500;
  24. vertical-align: middle;
  25. text-align: center;
  26. }

Comments

naren's picture

Where is the code? it is not possible to do it with css only.:P

knibals's picture

Excellent! Like the CSS only side of the thing!

rphillipsfeynman's picture

Would you please let us know how to make it work? Obviously just pasting this code and replacing the background with an existing throbber does not work. Thanks in advance!

varvashenia's picture

replace in css .custom-block-class to your block class

seryak's picture

Thanks for css-only way !
So easy, nice !

Supriya Rajgopal's picture

This works fantastically...thank you so much, varvashenia!