Доброго вам дня. 🙂
HTML - розмітка
У потрібному місці просто додайте ось таку ось рядок:
CSS - стилі
У Ваш файл стилів потрібно додати наступні стилі, які організовують анімацію і зададуть зовнішній вигляд анімації.
Давайте розберемо деякі параметри, щоб Ви могли налаштувати анімацію.
- У рядку - animation: spin 1s infinite steps (8); - два параметра, які Ви можете налаштувати. Перший - це час повної анімації, в даному випадки це 1 секунда - 1s. Другий - це кількість кроків, за які здійсниться анімація. У нашому випадки 8, тому як у нас 8 смужок як у прикладі. Ефект буде схожий на переморгування кожної смужки по черзі.
Якщо встановите значення, наприклад - 50, то анімація стане схожою на флеш, буде плавною і м'якою. - У рядку - transform: rotate (1turn); - можна встановити відповідне значення - 1turn. У попередньому пункті ми позначили час анімації - 1 секунда, а цей параметр встановлює кількість оборотів за цю секунду. В даному випадки - 1 оборот.
- У класу - progress є параметр font-size: 8px ;. з його допомогою можна налаштувати розмір даної анімації. Просто змініть цифру.
Також можете налаштувати інші параметри, колір і тд. Якщо все зробите правильно і налаштуєте під себе, отримаєте відмінний результат, який прикрасить Ваш сайт або сторінку.
А Ви використовуєте анімацію завантаження на своєму сайті?
На цьому все, спасибі за увагу. 🙂
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце