[شــرح] كود أيقونة آنلاین متحركة

[WIKIBA]

كود أيقونة آنلاین متحركة
كل ما عليك هو إضافة الكود أسفل في قالب extra.less و النقر على حفظ​

.message-avatar-wrapper .message-avatar-online {
    display: inline-block;
        width: 16px;
        height: 16px;
        margin: 0px 0 0 0px;
        background: #fff;
        border: none!important;
        border-radius: 50%!important
}
.message-avatar-wrapper .message-avatar-online:before {
    content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        margin: 1px 0 0 -7px;
        background: #7fb900;
        border-color: #7fb900;
        border-radius: 50%
}
.message-avatar-wrapper .message-avatar-online:after {
    content: '';
        position: absolute;
        width: 32px;
        height: 32px;
        margin: -10px 0 0 -17px;
        border: 1px solid #7fb900;
        border-radius: 50%;
        box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
        -webkit-transform: scale(0);
        -webkit-animation: online 2.5s ease-in-out infinite;
        animation: online 2.5s ease-in-out infinite
    }
@-webkit-keyframes online
    {
          0% {opacity: 1;-webkit-transform: scale(0)}
         50% {opacity: .7}
        100% {opacity: 0;-webkit-transform: scale(1)}
    }

@keyframes online
    {
          0% {opacity: 1;transform: scale(0)}
         50% {opacity: .7}
        100% {opacity: 0;transform: scale(1)}
    }

 

[Al jNtEeL]

جزاك الله خير شكرا ً جزيلا ً​

 

[ALIGSM]

بارك الله فيك وجزاك خيرا​

 

[عابر سبيل]

جزاك الله خيرا أخي الكريم​

 

[شعيب الجزائري]

بارك الله فيك​

 

[Alotaibi]

بارك الله فيك
شكرا لك على المشاركة​