templates/pages/_includes/preloaders/includes/_preload-card.html.twig line 1

Open in your IDE?
  2. <div class="preload preload-card">
  3. <div class="preload-card-header">
  4. <div class="preload-element preload-card-logo"></div>
  5. <div class="preload-element preload-card-favorite"></div>
  6. </div>
  8. <div class="preload-card-body">
  9. <div class="preload-element preload-card-title"></div>
  10. <div class="preload-element preload-card-date"></div>
  11. <div class="preload-element preload-card-departure"></div>
  12. <div class="preload-card-ship-button">
  13. <div class="preload-element preload-card-ship"></div>
  14. <div class="preload-element preload-card-button"></div>
  15. </div>
  16. </div>
  17. </div>
  19. <style>
  20. /* Variables pour contrôler la vitesse des animations */
  21. :root {
  22. --preload-shimmer-speed: 2.5s; /* Vitesse du shimmer */
  23. --preload-pulse-speed: 3s; /* Vitesse du pulse */
  24. --preload-overlay-speed: 3s; /* Vitesse de l'overlay */
  25. }
  27. /* Animation shimmer métallique */
  28. @keyframes shimmer {
  29. 0% {
  30. background-position: -468px 0;
  31. }
  32. 100% {
  33. background-position: 468px 0;
  34. }
  35. }
  37. @keyframes pulse {
  38. 0%, 100% {
  39. opacity: 1;
  40. }
  41. 50% {
  42. opacity: 0.7;
  43. }
  44. }
  46. div.preload-card{
  47. width: 100%;
  48. display: flex;
  49. flex-direction: column;
  50. padding: 6px;
  51. gap: 10px;
  52. animation: pulse var(--preload-pulse-speed) cubic-bezier(0.4, 0, 0.6, 1) infinite;
  53. filter: blur(2px);
  54. background-color: #ffffff;
  55. }
  57. div.preload-card div.preload-card-body{
  58. display: flex;
  59. flex-direction: column;
  60. gap: 5px;
  61. }
  63. div.preload-card div.preload-card-header{
  64. display: flex;
  65. justify-content: space-between;
  66. align-items: flex-start;
  67. min-height: 3.4375rem;
  68. }
  70. div.preload-card div.preload-element.preload-card-logo{
  71. width: 25%;
  72. }
  74. div.preload-card div.preload-element.preload-card-favorite{
  75. width: 10%;
  76. }
  78. div.preload-card div.preload-card-ship-button{
  79. display: flex;
  80. justify-content: space-between;
  81. align-items: center;
  82. }
  84. div.preload-card div.preload-card-ship-button>div{
  85. width: calc(100% / 3);
  86. }
  88. div.preload-card div.preload-element{
  89. height: 17px;
  90. border-radius: 18px;
  91. background: linear-gradient(
  92. to right,
  93. #e6e6e6 0%,
  94. #ececec 20%,
  95. #f2f2f2 40%,
  96. #ececec 60%,
  97. #e6e6e6 80%,
  98. #e6e6e6 100%
  99. );
  100. background-size: 468px 100%;
  101. animation: shimmer var(--preload-shimmer-speed) ease-in-out infinite;
  102. position: relative;
  103. overflow: hidden;
  104. }
  106. div.preload-card div.preload-element::after {
  107. content: '';
  108. position: absolute;
  109. top: 0;
  110. left: -100%;
  111. width: 100%;
  112. height: 100%;
  113. background: linear-gradient(
  114. 90deg,
  115. transparent,
  116. rgba(255, 255, 255, 0.2),
  117. transparent
  118. );
  119. animation: shimmer-overlay var(--preload-overlay-speed) ease-in-out infinite;
  120. }
  122. @keyframes shimmer-overlay {
  123. 0% {
  124. left: -100%;
  125. }
  126. 100% {
  127. left: 200%;
  128. }
  129. }
  131. div.preload-card div.preload-card-title{
  132. width: 100%;
  133. }
  135. div.preload-card div.preload-card-date{
  136. width: 45%;
  137. }
  139. div.preload-card div.preload-card-departure{
  140. width: 40%;
  141. }
  142. </style>