CSS만으로 (제출중인 Ajax 양식) 버튼에 빙글빙글을 표시하는 예

※표시의 제어는 스크립트로.



데모:
  • h tp // js 푹 dぇ. 네 t/긴페이/L레 Jf/쇼w/
  • 코드
  • .submit.loading::before {
        background-color: rgba(0,0,0,.5);
        content: "";
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .submit.loading::after {
        animation: rotate 1s infinite linear;
        content: "*";
        color: #fff;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    @keyframes rotate {
        0% { transform: rotate(0); }
        100% { transform: rotate(360deg); }
    }
    
    ::before 에서 오버레이를 표시하고 ::afteranimation 를 설정해 온다.

    좋은 웹페이지 즐겨찾기