HTML 및 CSS를 사용하여 확인 표시 애니메이션이 있는 로더 만들기

4224 단어 csshtmlincoderweb
안녕하세요 친구 여러분, 오늘 이 블로그에서는 HTML과 CSS를 사용하여 체크 표시 애니메이션이 있는 로더를 만드는 방법을 배웁니다. 이전 블로그에서 how to create a file downloader via URL using pure javascript을 보았습니다. 이전에 javascript와 관련된 많은 프로젝트를 공유했는데 원하는 경우 확인할 수 있으며 HTML, CSS 및 Javascript projects 확인하는 것을 잊지 마십시오.

프리로더(로더라고도 함)는 페이지의 나머지 콘텐츠가 계속 로드되는 동안 화면에 표시되는 것입니다. 로더는 페이지 콘텐츠가 계속 로드되는 동안 방문자와 콘텐츠 뷰어를 즐겁게 하는 데 사용되는 단순하거나 복잡한 애니메이션입니다.

이 프로그램(체크 표시 애니메이션이 있는 원형 로더)에서 이 로더는 특정 시간에 테두리 색상을 변경하면서 360도 무한 회전하지만 이 로더를 클릭하면 이 로더가 회전을 멈추고 로드 프로세스가 완료되었음을 나타내는 부드러운 애니메이션.

다음을 좋아할 수 있습니다.


  • Create Todo List App
  • Filterable Image Gallery with preview
  • How to Detect User Location
  • Create a button to download the image

  • 이 블로그가 마음에 들고 소스 코드 파일을 다운로드하려는 경우 이 프로그램here의 소스 파일을 쉽게 다운로드할 수 있는 이 프로그램의 다운로드 링크도 제공했습니다.

    HTML 코드




    <!DOCTYPE html>
    <html lang="en">
    <head>
    <!-- -------------------- Created By InCoder -------------------- -->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Loader With Check Mark Animation - InCoder</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <input type="checkbox" id="loader">
        <label for="loader">
            <div class="check"></div>
        </label>
    </body>
    </html>
    


    CSS 코드




    /* -------------------- Created By InCoder -------------------- */
    
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #202020;
    }
    
    input {
        display: none;
    }
    
    input:checked~label {
        animation: none;
        transition: border 0.5s ease-out;
    }
    
    input:checked~label .check {
        display: block;
    }
    
    label {
        width: 7rem;
        height: 7rem;
        position: relative;
        border-radius: 50%;
        border: 2px solid #ccc;
        border-left: 2px solid #472db9;
        animation: spin 1.2s linear infinite, colorChange 3s linear infinite;
    }
    
    label .check {
        top: 50%;
        left: 23px;
        width: 28px;
        content: "";
        height: 56px;
        display: none;
        position: absolute;
        transform-origin: left top;
        animation: check 0.8s ease;
        border-top: 4px solid #5cb85c;
        border-right: 4px solid #5cb85c;
        transform: scaleX(-1) rotate(135deg);
    }
    
    @keyframes check {
        0% {
            height: 0;
            width: 0;
            opacity: 1;
        }
    
        20% {
            height: 0;
            width: 28px;
            opacity: 1;
        }
    
        40% {
            height: 56px;
            width: 28px;
            opacity: 1;
        }
    
        100% {
            height: 56px;
            width: 28px;
            opacity: 1;
        }
    }
    
    @keyframes colorChange {
        40% {
            border-left: 2px solid #2db981;
        }
    
        60% {
            border-left: 2px solid #b97f2d;
        }
    
        80% {
            border-left: 2px solid #b92db2;
        }
    
        100% {
            border-left: 2px solid #b92d2d;
        }
    }
    
    @keyframes spin {
        100% {
            transform: rotate(360deg);
        }
    }
    

    좋은 웹페이지 즐겨찾기