How to make page loaders/animations/transitions

by

I go about it by providing different states for your page (eg. loading, loaded, and error). And passing in a status parameter, then using css to add a display: none class to it. (the hide class is display: none)

function setStatus(status) {
        document.getElementById("loading").classList.add("hide");
        document.getElementById("contents").classList.add("hide");
        if (status == "loaded") {
                document.getElementById("contents").classList.remove("hide");
        }
        if (status == "loading") {
                document.getElementById("loading").classList.remove("hide");
        }
        if (status == "error") {
                document.getElementById("error").classList.remove("hide");
                document.getElementById("consultant-wrapper").classList.remove("hide");
        }
        if (status == "info") {
                document.getElementById("not-enough-info").classList.remove("hide");
                document.getElementById("consultant-wrapper").classList.remove("hide");
        }

}

More Related Contents:

  1. Refresh/reload the content in Div using jquery/ajax
  2. Set timeout for ajax (jQuery)
  3. How can I modify with css an image appended with javascript?
  4. best tools for theme design? [closed]
  5. Css set size of elements in array dynamically [closed]
  6. How can I make my header smaller if i will scroll down the webpage [closed]
  7. Scroll Function working in reverse order [closed]
  8. How to send FormData objects with Ajax-requests in jQuery? [duplicate]
  9. Using jQuery to center a DIV on the screen
  10. Height equal to dynamic width (CSS fluid layout) [duplicate]
  11. jQuery: Get height of hidden element in jQuery
  12. horizontal scrollbar on top and bottom of table
  13. Using HTML5 file uploads with AJAX and jQuery
  14. Keep overflow div scrolled to bottom unless user scrolls up
  15. Show and hide divs at a specific time interval using jQuery
  16. How do I detect “shift+enter” and generate a new line in Textarea?
  17. Dashed border animation in css3 animation
  18. :touch CSS pseudo-class or something similar?
  19. CSS3-Animate elements if visible in viewport (Page Scroll)
  20. Open a new javascript window(.open) along with its CSS styling
  21. How to create a responsive image that also scales up in Bootstrap 3
  22. Check if element is between 30% and 60% of the viewport
  23. How to replace html element with ajax response?
  24. How do I make a move up and down when I’m scrolling the page?
  25. Fade background image in and out with jQuery?
  26. How do I detect the inherited background-color of an element using jQuery/JS?
  27. Convert dropdown to selection boxes with color and trigger drop down action
  28. how to use jQuery ajax calls with node.js
  29. Wrapping lists into columns
  30. Possible to reverse a css animation on class removal?

Leave a Comment