Why Not Posted March 5, 2016 Report Share Posted March 5, 2016 (edited) Всем привет! Решил выложить сюда несколько видов индикаторов загрузки на css без каких либо иконок и картинок.Не забываем ставить плюсы! Вариант 1. HTML: <div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> CSS: .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } Вариант 2. HTML: <div class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> CSS: .spinner { margin: 100px auto 0; width: 70px; text-align: center; } .spinner > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } Вариант 3. HTML: <div class="sk-circle"> <div class="sk-circle1 sk-child"></div> <div class="sk-circle2 sk-child"></div> <div class="sk-circle3 sk-child"></div> <div class="sk-circle4 sk-child"></div> <div class="sk-circle5 sk-child"></div> <div class="sk-circle6 sk-child"></div> <div class="sk-circle7 sk-child"></div> <div class="sk-circle8 sk-child"></div> <div class="sk-circle9 sk-child"></div> <div class="sk-circle10 sk-child"></div> <div class="sk-circle11 sk-child"></div> <div class="sk-circle12 sk-child"></div> </div> CSS: .sk-circle { margin: 100px auto; width: 40px; height: 40px; position: relative; } .sk-circle .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-circle .sk-child:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; border-radius: 100%; -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; } .sk-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .sk-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .sk-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sk-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .sk-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .sk-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sk-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .sk-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .sk-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sk-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .sk-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .sk-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .sk-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .sk-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .sk-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .sk-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .sk-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .sk-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .sk-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .sk-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .sk-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .sk-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } Вариант 4. HTML: <div class="sk-fading-circle"> <div class="sk-circle1 sk-circle"></div> <div class="sk-circle2 sk-circle"></div> <div class="sk-circle3 sk-circle"></div> <div class="sk-circle4 sk-circle"></div> <div class="sk-circle5 sk-circle"></div> <div class="sk-circle6 sk-circle"></div> <div class="sk-circle7 sk-circle"></div> <div class="sk-circle8 sk-circle"></div> <div class="sk-circle9 sk-circle"></div> <div class="sk-circle10 sk-circle"></div> <div class="sk-circle11 sk-circle"></div> <div class="sk-circle12 sk-circle"></div> </div> CSS: .sk-fading-circle { margin: 100px auto; width: 40px; height: 40px; position: relative; } .sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } .sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .sk-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .sk-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .sk-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .sk-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .sk-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .sk-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .sk-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .sk-fading-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .sk-fading-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .sk-fading-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } Edited March 5, 2016 by gundzha 2 Quote Link to comment Share on other sites More sharing options...
wenjiro Posted March 5, 2016 Report Share Posted March 5, 2016 Сорь за тупой вопрос, но куда HTML? Quote Link to comment Share on other sites More sharing options...
JacksScripts Posted March 5, 2016 Report Share Posted March 5, 2016 Сорь за тупой вопрос, но куда HTML?В main.tpl Quote Link to comment Share on other sites More sharing options...
wenjiro Posted March 5, 2016 Report Share Posted March 5, 2016 В main.tpl то-то же заменять нужно? Quote Link to comment Share on other sites More sharing options...
Why Not Posted March 6, 2016 Author Report Share Posted March 6, 2016 то-то же заменять нужно? Не обязательно в main.tpl Вставляешь туда, где хочешь заменить стандартный индикатор. К примеру в profile.tpl в обложке. Если не получится, пиши сюда. За плюс напишу инструкцию. 1 Quote Link to comment Share on other sites More sharing options...
DeepPhoenix Posted March 7, 2016 Report Share Posted March 7, 2016 Не обязательно в main.tpl Вставляешь туда, где хочешь заменить стандартный индикатор. К примеру в profile.tpl в обложке. Если не получится, пиши сюда. За плюс напишу инструкцию. поставил плюс, гони инструкцию) Quote Link to comment Share on other sites More sharing options...
Why Not Posted March 7, 2016 Author Report Share Posted March 7, 2016 (edited) поставил плюс, гони инструкцию) Привожу пример с обложкой. 1.Заходим в profile.tpl и ищем там строки: <div class="cover_loading no_display"><img src="{theme}/images/progress_gray.gif" /></div> Заменяем <img src="{theme}/images/progress_gray.gif" /> на тот html код, который выбрал. 2.CSS строки копируешь-вставляешь в style.css Всё. Edited March 7, 2016 by gundzha 1 Quote Link to comment Share on other sites More sharing options...
viiprogrammer Posted March 7, 2016 Report Share Posted March 7, 2016 Прикольно, 1-й похож на вариант анимации в JQuery плагина fakeloader 1 Quote Link to comment Share on other sites More sharing options...
GoogleChrome Posted March 8, 2016 Report Share Posted March 8, 2016 а зачем менять индикатор? вот шакала загрузки было бы очень неплохо, то есть прогресс загрузки Quote Link to comment Share on other sites More sharing options...
Why Not Posted March 9, 2016 Author Report Share Posted March 9, 2016 а зачем менять индикатор? вот шакала загрузки было бы очень неплохо, то есть прогресс загрузки Кому как..может кому то и это нужно Quote Link to comment Share on other sites More sharing options...
GoogleChrome Posted March 10, 2016 Report Share Posted March 10, 2016 а у кого нибудь реализован прогресс загрузки? Quote Link to comment Share on other sites More sharing options...
Why Not Posted March 12, 2016 Author Report Share Posted March 12, 2016 а у кого нибудь реализован прогресс загрузки? У меня. Полоса сверху тянется от 0% до 100% Quote Link to comment Share on other sites More sharing options...
GoogleChrome Posted March 13, 2016 Report Share Posted March 13, 2016 У меня. Полоса сверху тянется от 0% до 100% ну тогда делись решением ) Quote Link to comment Share on other sites More sharing options...
Why Not Posted March 13, 2016 Author Report Share Posted March 13, 2016 ну тогда делись решением ) Выдерни из сборки woofle Quote Link to comment Share on other sites More sharing options...
GoogleChrome Posted March 14, 2016 Report Share Posted March 14, 2016 инструкция бы не помешала. многим бы пригодилось Quote Link to comment Share on other sites More sharing options...
Why Not Posted March 14, 2016 Author Report Share Posted March 14, 2016 инструкция бы не помешала. многим бы пригодилось Ну если вы даже не можете выдернуть css и html, то простите, какие из вас администраторы сайтов? Давайте так, выдерните html+css, с js помогу 1 Quote Link to comment Share on other sites More sharing options...
Rezvitsky Posted June 11, 2018 Report Share Posted June 11, 2018 (edited) я так понял. К примеру берешь <img src="{theme}/images/progress_gray.gif" /></div> И заменяешь на 1 из 3 вариантов. А стили в style.css Edited June 11, 2018 by Rezvitsky Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.