Если у Вас есть приложение, загрузка которого занимает значительное количество времени, то было бы здорово установить заставку, чтобы немного оживить страницу и не дать загрустить пользователю. Часто, анимацию делают с помощью JavaScript, забывая, что CSS дает нам весьма широкие и более легковесные решения.
Привожу пример, который я использовал в одном из приложений. Код довольно простой, поэтому я не буду его комментировать. Я проверял этот код только в браузерах Chrome и FF последних версий, в IE данный код работать не должен. Если Вам не ясно почему transform: translate(-50%, -50%) используется в нескольких места, то попробуйте поиграть с этим правилом.
Идет загрузка…
А вот и сам исходник. Пользуйтесь на здоровье!
|
1 2 3 4 |
<div class="scene"> <div class="message">Идет загрузка...</div> <div class="spinner"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<style> .scene { position: relative; min-height: 200px; background-color: #add8e6; border-radius: 5px; } .spinner::before, .spinner::after { content: ''; position: absolute; top: 60%; left: 50%; box-sizing: border-box; border: 2px solid; border-radius: 50%; transform: translate(-50%, -50%); } .spinner::before { width: 80px; height: 80px; border-width: 10px; border-top-color: transparent; border-right-color: #f08080; border-bottom-color: transparent; border-left-color: #f08080; animation: spin 2s infinite linear; } .spinner::after { width: 46px; height: 46px; border-width: 23px; border-top-color: #f08080; border-right-color: #ffffff; border-bottom-color: #f08080; border-left-color: #ffffff; animation: spin 1s infinite linear; -webkit-animation-direction: reverse; amimation-direction: reverse; } @keyframes spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } } .message { padding-top: 25px; font-size: 24px; font-weight: bold; text-align: center; text-transform: uppercase; color: #ffffff; animation: blink 2.5s infinite ease-in-out; } @keyframes blink { from { opacity: 1; } 50% { opacity: .6; } } </style> |