Hướng dẫn tạo hiệu ứng loading giống gmail | Diễn đàn công nghệ - Tin học Việt
  1. Thông Báo: Quý công ty, doanh nghiệp, cá nhân nào có nhu cầu đặt banner, textlink trên diễn đàn xin vui lòng liên hệ trực tiếp qua email: lephuochuusvc@gmail.com giúp mình. Hoặc xem báo giá tại đây.
    Những thành viên nào spam, đưa những thông tin sai trái, cố gắng đưa liên kết bẩn vào bài viết các kiểu sẽ bị bắn nick cho vào spam vĩnh viễn

Hướng dẫn tạo hiệu ứng loading giống gmail

Thảo luận trong 'Mã nguồn khác' bắt đầu bởi huule1989, Thg 10 15, 2014.

Lượt xem: 15,936

  1. huule1989 ----Founder----

    Có bạn nào từng để ý hiệu ứng này chưa, đó là khi bạn login vào gmail, sau đó nó sẽ có một hiệu ứng loading nhìn rất hay. Và bạn nào từng hỏi làm sao để làm được việc đó hay không?

    Với cái này, bạn có thể làm 2 cách:
    Với cách thứ nhất mình sẽ không giới thiệu ở đây, mình chỉ giới thiệu cách thứ 2 đó là dùng CSS mà thôi.
    OK bắt tay vào thiết kế thôi chứ nhỉ.
    [​IMG]
    HTML:
    <b>Loading abc@gmail.com...</b>
    <div class="loader-gmail"></div>
    Đoạn HTML của chúng ta vô cùng đơn giản, gồm 2 thẻ là thẻ bthẻ div có class là loader-gmail
    CSS
    Sau đó bạn sử dụng đoạn css sau
    PHP:
    body {
      
    backgroundrgb(245,245,245);
    }
    {
      
    positionabsolute;
      
    topcalc(50% - 26px);
      
    left50%;
      
    transformtranslateX(-50%);
      
    font-familyarial,sans-serif;
    }
    .
    loader-gmail {
      
    positionabsolute;
      
    topcalc(50% - 6px);
      
    leftcalc(50% - 160px);
     
      
    border1px solid #a4a4a4;
      
    width320px;
      
    height8px;
      
    background-imagelinear-gradient(135deg#6187f2 0%, #6187f2 25%, #5679da 25%, #5679da 50%, #6187f2 50%, #6187f2 75%, #5679da 75%, #5679da 100%);
      
    background-repeatrepeat;
      
    background-position0px 0px;
      
    background-size16px 16px;
      
    background-clipcontent-box;
      
    padding1px;
      
    animationloading 1s linear infinite;
    }
     
    .
    loader-gmail:after {
      
    positionabsolute;
      
    right0;
      
    height8px;
      
    backgroundrgb(245,245,245);
      
    z-index20;
      
    animationprogress 4s ease-in-out infinite;
      
    content'';
    }
     
    @
    keyframes loading {
      
    from {
        
    background-position0px 0px;
      }
      
    to {
        
    background-position: -16px 0px;
      }
    }
     
    @
    keyframes progress {
      
    0% {
        
    min-width100%;
      }
      
    30% {
        
    min-width80%;
      }
      
    50% {
        
    min-width65%;
      }
      
    69% {
        
    min-width20%;
      }
      
    85% {
        
    min-width0;
      }
      
    100% {
        
    min-width0;
      }
    }
    Ở đây ta sử dụng 2 hiệu ứng animation được định nghĩa ở trên là Loading và progress. Vậy là xong rồi đó, thử view lên xem giống y đúc chưa nào
     
    :
    Phuhungnp thích bài này.
  • Chia sẻ trang này