Данный вид подойдет только для шаблонов идентичным моему по структуре. Хотя можете попробовать и на других.
Для начала зайдите в "Персональная страница пользователя и найдите там
Или же слова "Онлайн и Оффлайн если у вас прописано не через юкозовский код.
После чего вам нужно будет заменить на данный код
Код
<?if(strpos($_STATUS$,'Offline')!=-1)?>
<span class="statusOffline">
<div class="cssload-container">
<div class="cssload-part"></div>
<div class="cssload-part"></div>
<div class="cssload-part"></div>
<div class="cssload-part"></div>
<div class="cssload-part"></div>
</div>
</span>
<?else?>
<span class="statusOnline">
<div class="cssload-container2">
<div class="cssload-part2"></div>
<div class="cssload-part2"></div>
<div class="cssload-part2"></div>
<div class="cssload-part2"></div>
<div class="cssload-part2"></div>
</div>
</span>
<?endif?>
И закинуть данный код в css в самый низ.
Код
.cssload-container2 {
margin:auto;
display: box;
display: -o-box;
display: -ms-box;
display: -webkit-box;
display: -moz-box;
box-align: center;
-o-box-align: center;
-ms-box-align: center;
-webkit-box-align: center;
-moz-box-align: center;
align-items: center;
-o-align-items: center;
-ms-align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
box-pack: center;
-o-box-pack: center;
-ms-box-pack: center;
-webkit-box-pack: center;
-moz-box-pack: center;
justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
}
.cssload-container2 .cssload-part2 {
width: 4px;
height: 4px;
margin-left: 4px;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
background: rgb(85,255,0);
border-radius: 0px;
border: 0px solid rgb(153,255,0);
transition: background 115ms linear;
-o-transition: background 115ms linear;
-ms-transition: background 115ms linear;
-webkit-transition: background 115ms linear;
-moz-transition: background 115ms linear;
animation: cssload-change 1092.5ms linear infinite;
-o-animation: cssload-change 1092.5ms linear infinite;
-ms-animation: cssload-change 1092.5ms linear infinite;
-webkit-animation: cssload-change 1092.5ms linear infinite;
-moz-animation: cssload-change 1092.5ms linear infinite;
}
.cssload-container2 .cssload-part2:nth-child(1) {
animation-delay: 115ms;
-o-animation-delay: 115ms;
-ms-animation-delay: 115ms;
-webkit-animation-delay: 115ms;
-moz-animation-delay: 115ms;
}
.cssload-container2 .cssload-part2:nth-child(2) {
animation-delay: 230ms;
-o-animation-delay: 230ms;
-ms-animation-delay: 230ms;
-webkit-animation-delay: 230ms;
-moz-animation-delay: 230ms;
}
.cssload-container2 .cssload-part2:nth-child(3) {
animation-delay: 345ms;
-o-animation-delay: 345ms;
-ms-animation-delay: 345ms;
-webkit-animation-delay: 345ms;
-moz-animation-delay: 345ms;
}
.cssload-container2 .cssload-part2:nth-child(4) {
animation-delay: 460ms;
-o-animation-delay: 460ms;
-ms-animation-delay: 460ms;
-webkit-animation-delay: 460ms;
-moz-animation-delay: 460ms;
}
.cssload-container2 .cssload-part2:nth-child(5) {
animation-delay: 575ms;
-o-animation-delay: 575ms;
-ms-animation-delay: 575ms;
-webkit-animation-delay: 575ms;
-moz-animation-delay: 575ms;
}
@keyframes cssload-change {
0% {
border-radius: 0px;
}
17.5% {
border-radius: 0px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 0px;
}
100% {
border-radius: 0px;
}
}
@-o-keyframes cssload-change {
0% {
border-radius: 0px;
}
17.5% {
border-radius: 0px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 0px;
}
100% {
border-radius: 0px;
}
}
@-ms-keyframes cssload-change {
0% {
border-radius: 0px;
}
17.5% {
border-radius: 0px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 0px;
}
100% {
border-radius: 0px;
}
}
@-webkit-keyframes cssload-change {
0% {
border-radius: 0px;
}
17.5% {
border-radius: 0px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 0px;
}
100% {
border-radius: 0px;
}
}
@-moz-keyframes cssload-change {
0% {
border-radius: 0px;
}
17.5% {
border-radius: 0px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 0px;
}
100% {
border-radius: 0px;
}
}
.cssload-container {
margin:auto;
display: box;
display: -o-box;
display: -ms-box;
display: -webkit-box;
display: -moz-box;
box-align: center;
-o-box-align: center;
-ms-box-align: center;
-webkit-box-align: center;
-moz-box-align: center;
align-items: center;
-o-align-items: center;
-ms-align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
box-pack: center;
-o-box-pack: center;
-ms-box-pack: center;
-webkit-box-pack: center;
-moz-box-pack: center;
justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
}
.cssload-container .cssload-part {
width: 4px;
height: 4px;
margin-left: 4px;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
background: rgb(255,0,0);
border-radius: 0px;
border: 0px solid rgb(255,0,0);
transition: background 115ms linear;
-o-transition: background 115ms linear;
-ms-transition: background 115ms linear;
-webkit-transition: background 115ms linear;
-moz-transition: background 115ms linear;
animation: cssload-change 1092.5ms linear infinite;
-o-animation: cssload-change 1092.5ms linear infinite;
-ms-animation: cssload-change 1092.5ms linear infinite;
-webkit-animation: cssload-change 1092.5ms linear infinite;
-moz-animation: cssload-change 1092.5ms linear infinite;
}
.cssload-container .cssload-part:nth-child(1) {
animation-delay: 115ms;
-o-animation-delay: 115ms;
-ms-animation-delay: 115ms;
-webkit-animation-delay: 115ms;
-moz-animation-delay: 115ms;
}
.cssload-container .cssload-part:nth-child(2) {
animation-delay: 230ms;
-o-animation-delay: 230ms;
-ms-animation-delay: 230ms;
-webkit-animation-delay: 230ms;
-moz-animation-delay: 230ms;
}
.cssload-container .cssload-part:nth-child(3) {
animation-delay: 345ms;
-o-animation-delay: 345ms;
-ms-animation-delay: 345ms;
-webkit-animation-delay: 345ms;
-moz-animation-delay: 345ms;
}
.cssload-container .cssload-part:nth-child(4) {
animation-delay: 460ms;
-o-animation-delay: 460ms;
-ms-animation-delay: 460ms;
-webkit-animation-delay: 460ms;
-moz-animation-delay: 460ms;
}
.cssload-container .cssload-part:nth-child(5) {
animation-delay: 575ms;
-o-animation-delay: 575ms;
-ms-animation-delay: 575ms;
-webkit-animation-delay: 575ms;
-moz-animation-delay: 575ms;
}
@keyframes cssload-change {
0% {
border-radius: 0px;
}
17.5% {
border-radius: 0px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 0px;
}
100% {
border-radius: 0px;
}
}
@-o-keyframes cssload-change {
0% {
border-radius: 0px;
}
17.5% {
border-radius: 0px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 0px;
}
100% {
border-radius: 0px;
}
}
@-ms-keyframes cssload-change {
0% {
border-radius: 0px;
}
17.5% {
border-radius: 0px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 0px;
}
100% {
border-radius: 0px;
}
}
@-webkit-keyframes cssload-change {
0% {
border-radius: 0px;
}
17.5% {
border-radius: 0px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 0px;
}
100% {
border-radius: 0px;
}
}
@-moz-keyframes cssload-change {
0% {
border-radius: 0px;
}
17.5% {
border-radius: 0px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 0px;
}
100% {
border-radius: 0px;
}
}
