CSS is not linked to HTML(template) file successfully and nothing happens when I change the CSS – Django

I just finished reading Django document and I’m trying to deploy a website with it.

I linked all the style sheets to HTML file(template) but when I change the CSS file(like changing color), nothing change. Furthermore the pre loader don’t work and Its just spinning.

Directory Structure:

HTML file header:

<link rel="stylesheet" href="{% static 'css/basic.css' %}" />
<link rel="stylesheet" href="{% static 'css/layout.css' %}" />
<link rel="stylesheet" href="{% static 'css/blogs.css' %}" />
<link rel="stylesheet" href="{% static 'css/line-awesome.css' %}" />
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'css/simplebar.css' %}" />

views.py:

def home(request):

    return render(request, "index.html")

setting.py:

STATIC_URL = 'static/'
STATICFILES_DIR = [
    path.join(BASE_DIR, 'static'),
]
STATIC_ROOT = path.join(BASE_DIR, 'static')

And for the preloader:

HTML file:

<div class="preloader">
   <div class="centrize full-width">
      <div class="vertical-center">
         <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
         </div>
      </div>
   </div>
</div>

js:

$(window).on("load", function() {
   var preload = $('.preloader');
   var lines = $('.lines-grid');
   preload.find('.spinner').fadeOut(function(){
      preload.fadeOut();
      lines.addClass('loaded');
   });
});

I tried to delete the pre loader but when I delete the JS or the html element the page goes black at all