Динамически сделать CSS класс

Question

Используя эту ссылку, я создал погрузочные бары DIV с HTML и CSS
http://www.paulund.co.uk/css-loading-spinners

Однако, теперь я хочу использовать JS, чтобы создать такую ​​полосу загрузки; Я хочу использовать функцию, определяющую высоту, ширину и другие атрибуты css, и определяет, сколько барных разделов используется для панели загрузки. Я понимаю, что есть много библиотек, которые делают такие, но я бы предпочел не использовать их на данный момент, пока я все еще изучаю JS/jQuery/CSS.

Что должно быть добавлено к элементу стиля будет:

 .loading{ 
      width: 100px; 
      height: 100px; 
      margin: 30px auto; 
      position: relative; 
     } 

     .loading.bar div{ 
      width: 10px; 
      height: 30px; 
      border-radius:5px; 
      background: black; 
      position: absolute; 
      top: 35px; 
      left: 45px; 
      opacity: 0.05; 

      -webkit-animation: fadeit 1.1s linear infinite; 
      animation: fadeit 1.1s linear infinite; 
     } 



     .loading.bar div:nth-child(1){ 
      -webkit-transform: rotate(0deg) translate(0, -30px); 
      transform: rotate(0deg) translate(0, -30px); 

      -webkit-animation-delay:0s; 
      animation-delay:0s; 
     } 

Где я должен был бы определить ширину, высоту, каждый п-й ребенок ...

Так что мой вопрос является следуя даже в правильном направлении? Кроме того, имеет ли смысл делать это? Я имею в виду, я хочу учиться; однако я не хочу изучать что-то, что кажется ненужным.

<script> 
     function addSpinner(bar_amount, time_incr, height, width, margin){ 
      // 
      //$('head').removeClass('load'); 
      $('<style>.load{width: ' + width + 'px; height: ' + height + 'px; margin: ' + margin + 'px auto; position: relative;}</style>').append('head'); 

      // 
      $('<style>.load.brick div{width: 10px; height: 30px; border-radius:5px; background: black; position: absolute; top: 35px; left: 45px; opacity: 0.05; -webkit-animation: fadeit 1.1s linear infinite; animation: fadeit 1.1s linear infinite;}</style>').append('head'); 

      // 
      for(var i = 0; i < bar_amount; ++i){ 
       var degree = i/bar_amount * 360; 
       var delay = i * time_incr; 

       window.alert('<style>.load.brick div:nth-child(' + (i + 1) + '){ -webkit-transform: rotate(' + degree + 'deg) translate(0, -30px); transform: rotate(' + degree + 'deg) translate(0, -30px); -webkit-animation-delay:' + delay + 's; animation-delay:' + delay + ';</style>'); 

       // 
       $('<style>.load.brick div:nth-child(' + (i + 1) + '){-webkit-transform: rotate(' + degree + 'deg) translate(0, -30px); transform: rotate(' + degree + 'deg) translate(0, -30px); -webkit-animation-delay:' + delay + 's; animation-delay:' + delay + ';</style>').append('head'); 
      } 


      var spinner_div = $('<div class="load brick"/>'); 

      for(var i = 0; i < bar_amount; ++i){ 
       spinner_div.append('<div/>'); 
      } 

      return spinner_div; 
     } 


     $(document).ready(function(){ 
      var new_spinner = addSpinner(8, 0.13, 100, 100, 30); 

      $('body').append(new_spinner); 
     }); 
    </script> 

Answer 1

Вы почти находитесь, но способ добавления вашего css к документу не нужен. Вы можете сделать это следующим образом гораздо проще, но вы должны сделать это после того, как вы добавите вертушку на страницу:

$('.load.brick').css({ 
    'width': width + 'px', 
    'height': height + 'px', 
    'margin': margin + 'px auto', 
    'position': 'relative' 
}); 

Все, что не изменится, такие как position: relative вы не должны применяться в JQuery , просто добавьте это, как правило, в свой существующий файл css. Единственное, что вам нужно включить в ваш jQuery, это вещи, которые являются переменными. Это означает, что второй тег стиля, который вы добавляете, должен полностью входить в ваш файл css, поскольку он полностью статичен. Не нужно добавлять его через jQuery, поскольку он просто тратит ценные ресурсы браузера.

Кроме того, вы можете присоединиться к вашей for петли для аккуратнее, более быстрый код:

var spinner_div = $('<div class="load brick"/>'); 

for(var i = 0; i < bar_amount; ++i) { 
    var degree = i/bar_amount * 360, 
     delay = i * time_incr, 
     tile = $('<div class="tile' + i + '"></div>' 

    tile.css({ 
     '-webkit-transform': 'rotate(' + degree + 'deg) translate(0, -30px)', 
     'transform': 'rotate(' + degree + 'deg) translate(0, -30px)', 
     '-webkit-animation-delay': delay + 's', 
     'animation-delay': delay + 's' 
    }); 

    spinner_div.append(tile); 
} 

return spinner_div; 

Answer 2

Я бы использовал стандартный spinner.css с вашими классами spinner и изменил стиль spinner_div по мере необходимости.

var spinner_div = $('<div class="load brick" />'); 
$(spinner_div).style(...) 

for(...) 

return spinner_div; 

Answer 3

Если вы делаете это исключительно как учебное упражнение, то продолжайте исследовать, похоже, что вы на правильном пути. Так как вы хотите использовать только JS/Jquery, то вы могли бы использовать jquery css method, то вы могли бы сделать вещи немного очистителя в вашей addSpinner функции:

spinner_div.css("width", width+'px'); 
spinner_div.css("height", height+'px'); 
spinner_div.css("margin", margin+'px'); 

т.д.

Я понимаю, что вы просто играть вокруг с этим, но если вы продолжите использовать это для реального проекта, то стоит заметить, что добавление/управление всеми этими стилями CSS (особенно для HTML-заголовка), как вы делаете с javascript/jquery, считается плохой практикой - оно имеет медленная производительность и затрудняет отладку. Общее решение для загрузки divs - это просто загрузить css откуда-то вроде ajax loader, а затем вы можете использовать простые addClass и removeClass jquery, чтобы включить и выключить гифы.

Answer 4

Как вы знаете, я все еще учусь CSS/HTML5/JS, так что я не могу сказать, что это самый чистый код, но я подумал, что, по крайней мере, опубликую рабочий пример. Я понимаю, что статические разделы не нужно объявлять динамически, но для того, чтобы просто привести пример, я его оставил.Спасибо всем, и да, я знаю, что у меня есть длинный путь :)

<head> 
    <script src="jquery-2.1.1.min.js"></script> 


    <style> 
     @-webkit-keyframes fadeit{ 
      0%{opacity: 1;} 
      100%{opacity: 0;} 
     } 

     @keyframes fadeit{ 
      0%{opacity: 1;} 
      100%{opacity: 0;} 
     } 

     .load{} 

     .load.brick{ 
      width: 10px; 
      height: 30px; 
      border-radius:5px; 
      background: black; 
      position: absolute; 
      top: 35px; 
      left: 45px; 
      opacity: 0.05; 

      -webkit-animation: fadeit 1.1s linear infinite; 
      animation: fadeit 1.1s linear infinite; 
     } 

    </style> 
</head> 


<body> 
    <div id="spinner" class="load"> 
    </div> 

    <script> 
     function addSpinner(bar_amount, time_incr, height, width, margin){ 
      var spinner_div = $('#spinner'); 

      // 
      //$('head').removeClass('load'); 
      $('.load ').css({'width': width + 'px', 
          'height': height + 'px', 
          'margin': margin + 'px auto', 
          'position': 'relative'}); 

      // 
      for(var i = 0; i < bar_amount; ++i){ 
       var degree = i/bar_amount * 360; 
       var delay = i * time_incr; 
       var tile = $('<div class="load brick"></div>'); 

       // 
       tile.css({ '-webkit-transform': 'rotate(' + degree + 'deg) translate(0, -30px)', 
          'transform': 'rotate(' + degree + 'deg) translate(0, -30px)', 
          '-webkit-animation-delay': delay + 's', 
          'animation-delay': delay + 's'}); 

       // 
       spinner_div.append(tile); 
      } 
     } 


     $(document).ready(function(){ 
      addSpinner(9, 0.13, 100, 100, 30); 
     }); 
    </script> 


</body>