templates/shared/ui/loader/loader.html.twig line 1

Open in your IDE?
  1. <div id="loader" class="hidden showbox fixed inset-0 p-5 bg-gray-100/40">
  2.     <div class="loader relative w-24 h-24 mx-auto">
  3.         <svg class="circular absolute inset-0 top-[40vh] w-full h-full animate-spin" viewBox="25 25 50 50">
  4.             <circle class="path fill-none stroke-current stroke-[2px] stroke-miterlimit-10 animate-dash" cx="50" cy="50" r="20" />
  5.         </svg>
  6.     </div>
  7. </div>
  8. <style>
  9.     @keyframes dash {
  10.         0% {
  11.             stroke-dasharray: 1, 200;
  12.             stroke-dashoffset: 0;
  13.         }
  14.         50% {
  15.             stroke-dasharray: 89, 200;
  16.             stroke-dashoffset: -35px;
  17.         }
  18.         100% {
  19.             stroke-dasharray: 89, 200;
  20.             stroke-dashoffset: -124px;
  21.         }
  22.     }
  24.     @keyframes color {
  25.         0%, 100% {
  26.             stroke: #d62d20;
  27.         }
  28.         40% {
  29.             stroke: #0057e7;
  30.         }
  31.         66% {
  32.             stroke: #008744;
  33.         }
  34.         80%, 90% {
  35.             stroke: #ffa700;
  36.         }
  37.     }
  39.     /* Стиль для анімації обертання */
  40.     .animate-spin {
  41.         animation: rotate 2s linear infinite;
  42.     }
  44.     @keyframes rotate {
  45.         100% {
  46.             transform: rotate(360deg);
  47.         }
  48.     }
  50.     /* Анімація руху dash */
  51.     .animate-dash {
  52.         stroke-dasharray: 1, 200;
  53.         stroke-dashoffset: 0;
  54.         animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  55.     }
  56. </style>
  61. {#<div id="loader" class="showbox hidden">#}
  62. {#    <div class="loader">#}
  63. {#        <svg class="circular" viewBox="25 25 50 50">#}
  64. {#            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>#}
  65. {#        </svg>#}
  66. {#    </div>#}
  67. {#</div>#}
  68. {#<style>#}
  69. {#    .loader {#}
  70. {#        position: relative;#}
  71. {#        margin: 0 auto;#}
  72. {#        width: 100px;#}
  73. {#        &:before {#}
  74. {#            content: '';#}
  75. {#            display: block;#}
  76. {#            padding-top: 100%;#}
  77. {#        }#}
  78. {#    }#}
  80. {#    .circular {#}
  81. {#        animation: rotate 2s linear infinite;#}
  82. {#        height: 100%;#}
  83. {#        transform-origin: center center;#}
  84. {#        width: 100%;#}
  85. {#        position: absolute;#}
  86. {#        top: 0;#}
  87. {#        bottom: 0;#}
  88. {#        left: 0;#}
  89. {#        right: 0;#}
  90. {#        margin: auto;#}
  91. {#    }#}
  93. {#    .path {#}
  94. {#        stroke-dasharray: 1, 200;#}
  95. {#        stroke-dashoffset: 0;#}
  96. {#        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;#}
  97. {#        stroke-linecap: round;#}
  98. {#    }#}
  100. {#    @keyframes rotate {#}
  101. {#        100% {#}
  102. {#            transform: rotate(360deg);#}
  103. {#        }#}
  104. {#    }#}
  106. {#    @keyframes dash {#}
  107. {#        0% {#}
  108. {#            stroke-dasharray: 1, 200;#}
  109. {#            stroke-dashoffset: 0;#}
  110. {#        }#}
  111. {#        50% {#}
  112. {#            stroke-dasharray: 89, 200;#}
  113. {#            stroke-dashoffset: -35px;#}
  114. {#        }#}
  115. {#        100% {#}
  116. {#            stroke-dasharray: 89, 200;#}
  117. {#            stroke-dashoffset: -124px;#}
  118. {#        }#}
  119. {#    }#}
  121. {#    @keyframes color {#}
  122. {#        100%,#}
  123. {#        0% {#}
  124. {#            stroke: #d62d20;#}
  125. {#        }#}
  126. {#        40% {#}
  127. {#            stroke: #0057e7;#}
  128. {#        }#}
  129. {#        66% {#}
  130. {#            stroke: #008744;#}
  131. {#        }#}
  132. {#        80%,#}
  133. {#        90% {#}
  134. {#            stroke: #ffa700;#}
  135. {#        }#}
  136. {#    }#}
  137. {#    #}
  138. {#       body {#}
  139. {#           background-color: #eee;#}
  140. {#       }#}
  141. {#    .showbox {#}
  142. {#        position: absolute;#}
  143. {#        top: 40%;#}
  144. {#        left: 0;#}
  145. {#        right: 0;#}
  146. {#        padding: 5%;#}
  147. {#    }#}
  148. {#</style>#}