How to add loader/spinner in a Django based website




The loader is used to provide a progress bar until the site loaded completely.

The loader is the best way to manage wait time on page load or any other operation.

How to add loader/spinner on a Django based website.


#djangospinner #djangotraining #bestdjangotraining #djangotutorials #djangofreetutorials

How to use loader in Website front page:-


1)  Create the Html page and define two different <div> tag one for loader and another for complete site content.



<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">

   All Site Content


</div>



2) Write Style to manage loader or we can place the image under it.


<style>

/* Center the loader */

#loader {

  position: absolute;

  left: 50%;

  top: 50%;

  z-index: 1;

  width: 150px;

  height: 150px;

  margin: -75px 0 0 -75px;

  border: 16px solid #f3f3f3;

  border-radius: 50%;

  border-top: 16px solid #3498db;

  width: 120px;

  height: 120px;

  -webkit-animation: spin 2s linear infinite;

  animation: spin 2s linear infinite;

}


@-webkit-keyframes spin {

  0% { -webkit-transform: rotate(0deg); }

  100% { -webkit-transform: rotate(360deg); }

}


@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}


/* Add animation to "page content" */

.animate-bottom {

  position: relative;

  -webkit-animation-name: animatebottom;

  -webkit-animation-duration: 1s;

  animation-name: animatebottom;

  animation-duration: 1s

}


@-webkit-keyframes animatebottom {

  from { bottom:-100px; opacity:0 } 

  to { bottom:0px; opacity:1 }

}


@keyframes animatebottom { 

  from{ bottom:-100px; opacity:0 } 

  to{ bottom:0; opacity:1 }

}


#myDiv {

  display: none;

  text-align: center;

}

</style>


3)Use onload event underbody and call function into it.


<body onload="myFunction()">



4)  Define javascript function to implement loader.


<script>

var myVar;


function myFunction() {

  myVar = setTimeout(showPage, 3000);

}


function showPage() {

  document.getElementById("loader").style.display = "none";

  document.getElementById("myDiv").style.display = "block";

}

</script>



Complete Code of Loader in Single Page in Django:-



<!DOCTYPE html>

<html>

<head>

<title></title>

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'guestapp/css/style.css' %}">


<style>

/* Center the loader */

#loader {

  position: absolute;

  left: 50%;

  top: 50%;

  z-index: 1;

  width: 150px;

  height: 150px;

  margin: -75px 0 0 -75px;

  border: 16px solid #f3f3f3;

  border-radius: 50%;

  border-top: 16px solid #3498db;

  width: 120px;

  height: 120px;

  -webkit-animation: spin 2s linear infinite;

  animation: spin 2s linear infinite;

}


@-webkit-keyframes spin {

  0% { -webkit-transform: rotate(0deg); }

  100% { -webkit-transform: rotate(360deg); }

}


@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}


/* Add animation to "page content" */

.animate-bottom {

  position: relative;

  -webkit-animation-name: animatebottom;

  -webkit-animation-duration: 1s;

  animation-name: animatebottom;

  animation-duration: 1s

}


@-webkit-keyframes animatebottom {

  from { bottom:-100px; opacity:0 } 

  to { bottom:0px; opacity:1 }

}


@keyframes animatebottom { 

  from{ bottom:-100px; opacity:0 } 

  to{ bottom:0; opacity:1 }

}


#myDiv {

  display: none;

  text-align: center;

}

</style>

</head>

<body onload="myFunction()">

<div id="loader"></div>


<div style="display:none;" id="myDiv" class="animate-bottom">

<header>

{% block headercontent %}


    {% endblock %}

</header>

<section style="overflow: scroll;">

{% block content %}


    {% endblock %}


</section>

<footer>

<center>&copy;2020 by SHIVA CONCEPT</center>


</footer>

</div>

<script>

var myVar;


function myFunction() {

  myVar = setTimeout(showPage, 3000);

}


function showPage() {

  document.getElementById("loader").style.display = "none";

  document.getElementById("myDiv").style.display = "block";

}

</script>

</body>

</html>






Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post