JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<style>
  .has-ripple {
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0; /* Цвет фона каркаса */
  }
  
  .has-ripple::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: ripple 1.5s linear infinite;
  }
  
  @keyframes ripple {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Эмулируем загрузку данных с сервера (в реальном коде это будет AJAX-запрос)
  setTimeout(function() {
    // Находим все элементы с анимацией
    const rippleElements = document.querySelectorAll('.has-ripple');
    
    // Удаляем анимацию после загрузки данных
    rippleElements.forEach(el => {
      el.classList.remove('has-ripple');
      
      // В реальном коде здесь будет добавление контента (размеров и цен)
      // Например:
      // el.innerHTML = '<a href="...">80*60<span>от 5 814 ₽</span></a>';
    });
  }, 3000); // Задержка для демонстрации (в реальном коде удалите таймаут)
});
</script>





<div class="props" data-id-product="17718" data-url="/catalog/pryamougolnye/seriya_alisa/?oid=132735">
											    <div class="item">
											        <p class="btn has-ripple" style="width: 134px; height: 25px"></p>
											        <p class="btn" style="width: 134px; height: 25px"></p>
											        <p class="btn has-ripple" style="width: 144px; height: 25px"></p>
											    </div>
											    <a>
													<p style="width: 154px; height: 25px" class="btn has-ripple"></p>
												</a>
											</div>



<div class="props" data-id-product="17719" data-url="/catalog/pryamougolnye/seriya_frame/"><div class="item">
            <p class="btn">
            <a...