Fun search loading css

Fun search loading css

 

Body {margin-top: 50px ;}. s-body {width: 400px; margin-left: auto; margin-right: auto ;}. s-input {border: 1px solid # ccc; padding: 2px 4px 2px 4px; border-radius: 3px; box-shadow: rgba (22, 22, 22 ,. 1) 0px 1px 1px ;}. s-input {width: 325px; border: 0px solid # ccc; outline: none; height: 25px; font-size: 16px ;}. s-input button {margin-top:-2px; margin-right:-4px; float: right; border-width: 0px; outline: none; padding: 9px 19px; line-height: 100%; background-color: rgba (190,26, 33 ,. 7); color: # fff; letter-spacing: 1px; font-weight: bold ;}. s-input.loding input {width: 290px ;}. s-input: disabled {color: rgba (0, 0, 0 ,. 7); background-color: # fff ;}. s-input.loding button {background-color: rgba (, 33 ,. 91); animation: stretchdelay 4S infinite extract-in-out;-webkit-animation: stretchdelay 4S infinite extract-in-out ;}. s-input.loding button: before {content: in progress;} @-webkit-keyframes stretchdelay {50% {-webkit-transform: translateX (-300px)} 0% {-webkit-transform: translateX (0px) }@keyframes stretchdelay {50% {transform: translateX (-300px);-webkit-transform: translateX (-300px);} 0% {transform: translateX (0px);-webkit-transform: translateX (0px );}}. s-input button: hover {background-color: rgba (,); cursor: pointer ;}

$(function () {            $(.s-input button).click(function () {                if ($(this).parent().hasClass(loding))                {                    $(this).parent().removeClass(loding).children(input).prop(disabled, false).focus();                } else                {                    $(this).parent().addClass(loding).children(input).prop(disabled, true);                }            });        })