Как бы вы поместили переменную JQuery в текстовое содержимое CSS?

Question

спасибо за проверку моего вопроса. Я оглянулся и не могу найти способ сделать то, что мне нужно.

У меня есть переменная JQuery:

jQuery(document).ready(function($) {
  var test1 = "testing";
  $('#id1').text(test1);
  });

И у меня есть некоторые css:

@keyframes loading-text { 
  0% {
    content: "Loading";
  }
  100% {
    content: "Done";
  }

Можно ли добавить мою переменную в содержимое ? Я попытался добавить <span id="id1"></span> без удачи. Вот некоторые вещи, которые я попробовал. Мои знания очень просты c с содержанием css.

content: "Hello" <span id="id1"></span>;
content: "Hello" "<span id="id1"></span>";
content: "Hello '<span id="id1"></span>'";

Вот полный код, если это поможет: https://jsfiddle.net/ven10t4o/1/

Заранее благодарен за любую помощь!

Answer 1

Попробуйте это. Я отредактировал jquery и добавил цвет к белому

  $(document).ready(function($) {
  var username = "testing";
  $('.loading-text').attr("data-id1",username);
  });

@keyframes loading-text { 
  0% {
    content:attr(data-id1) " Hello1";
  }
  30% { 
    content: attr(data-id1) " Hello 2";
  }
  35% { 
    content: attr(data-id1) " Hello 3";
  }
  60% {
    content: attr(data-id1) " Hello 4";
  }
  75% {
    content: attr(data-id1) " Hello 5";
  }
  90% {
    content: attr(data-id1) " Hello 6";
  }
    95% {
    content: attr(data-id1) " Hello 7";
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-text {
  margin-top: -50px;
  margin-right: 20px;
  font-family: sans-serif;
  font-size: 1.5em;
  color:white;
  text-align:right;
}

.loading-text:after {
  content: attr(data-id1) " Welcome";
  color: #fff;
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 12s;
  animation-iteration-count: 1;
}

body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
#id1{
  color:white;
}
.triangle {
  stroke-dasharray: 17;
  animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 136;
  }
}

.loading {
  font-family: 'Orbitron', sans-serif;
  font-size: 7px;
  animation: blink .9s ease-in-out infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading-container">
  <svg width="200" height="200" viewBox="0 0 40 60">
    <polygon class="triangle" fill="none" stroke="#fc0303" stroke-width="1" points="16,1 32,32 1,32" />
  </svg>
  <span data-id1=""   
  class="loading-text"></span>
</div>
<div class="scss-loader"></div>
<span id="id1"></span>