Сделаем анимированный индикатор загрузки на CSS3 без использования каких-либо изображений. Будем использовать две синхронизированные анимации - одну для формирования плавного изменения цвета,а вторую - для вращения всей композиции. Индикатор загрузки на CSS3 без изображений HTML Можно использовать псевдо-элементы, но анимация для них будет возможно только в Mozilla Firefox. Поэтому используем ниже приведенную конструкцию: 1 <div class="loading-wrap"> 2 <div class="triangle1"></div> 3 <div class="triangle2"></div> 4 <div class="triangle3"></div> 5 </div> CSS Следует обратить внимание на следующие моменты: Для формирования приятного изменения цвета во всех трех треугольниках нужно увеличивать задержку анимации. Между кадрами анимации для 20% и 100% поворота имеется интервал. Такой трюк формирует эффект остановки при проигрывании анимации. 01 .loading-wrap { 02 width: 60px; height: 60px; 03 position: absolute; 04 top: 50%; left: 50%; 05 margin: -30px 0 0 -30px; 06 background: #777; 07 animation: rotation ease-in-out 2s infinite; 08 border-radius: 30px; 09 } 10 11 .triangle1, .triangle2, .triangle3 { 12 border-width: 0 20px 30px 20px; 13 border-style: solid; 14 border-color: transparent; 15 border-bottom-color: #67cbf0; 16 height: 0; width: 0; 17 position: absolute; 18 left: 10px; top: -10px; 19 animation: fadecolor 2s 1s infinite; 20 } 21 22 .triangle2, .triangle3 { 23 content: ''; 24 top: 20px; left: 30px; 25 animation-delay: 1.1s; 26 } 27 28 .triangle3 { 29 left: -10px; 30 animation-delay: 1.2s; 31 } 32 33 @keyframes rotation { 34 0% {transform: rotate(0deg);} 35 20% {transform: rotate(360deg);} 36 100% {transform: rotate(360deg);} 37 } 38 39 @keyframes fadecolor { 40 0% {border-bottom-color: #eee;} 41 100%{border-bottom-color: #67cbf0;} 42 } Заключение Несмотря на привлекательность данного метода для формирования подобных популярных элементов, в настоящее время должно проводиться с осторожностью. CSS3 еще не достаточно хорошо поддерживается в браузерах. Но за такими методами будущее, так как они помогают сокращать количество HTTP запросов от браузера пользователя.