04/10/2018, 20:11

Loading icon cực sáng tạo với HTML5 & CSS3

Hôm nay mình sẽ mang đến cho các bạn thêm một mẫu loading rất dễ làm với sự kết hợp hoàn hảo giữa html và CSS3. Qua bài viết này, các bạn sẽ hiểu được cách tạo các hiệu ứng động đơn giản bằng CSS3 và có thể áp dụng hiệu ứng này ngay cho website hay blog mà các bạn đang quản lý. Xem Demo | ...

Hôm nay mình sẽ mang đến cho các bạn thêm một mẫu loading rất dễ làm với sự kết hợp hoàn hảo giữa html và CSS3. Qua bài viết này, các bạn sẽ hiểu được cách tạo các hiệu ứng động đơn giản bằng CSS3 và có thể áp dụng hiệu ứng này ngay cho website hay blog mà các bạn đang quản lý.

Loading icon cực sáng tạo với HTML5 & CSS3

Xem Demo | Download

HTML

Để tạo hiệu ứng loading, chúng ta cần các thẻ html được bố trí như sau :

<div class="animationload">
    <div class="osahanloading"></div>
</div>

CSS

Các bạn hãy xem cách tạo hiệu ứng động cực đơn giản với đoạn css bên dưới.

.animationload {
    background-color: #fff;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    awidth: 100%;
    z-index: 10000;
}
.osahanloading {
    animation: 1.5s linear 0s normal none infinite running osahanloading;
    background: #fed37f none repeat scroll 0 0;
    border-radius: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    awidth: 50px;
}

.osahanloading::after {
    animation: 1.5s linear 0s normal none infinite running osahanloading_after;
    border-color: #85d6de transparent;
    border-radius: 80px;
    border-style: solid;
    border-awidth: 10px;
    content: "";
    height: 80px;
    left: -25px;
    position: absolute;
    top: -26px;
    awidth: 80px;
}

@keyframes osahanloading {
0% {
    transform: rotate(0deg);
}
50% {
    background: #85d6de none repeat scroll 0 0;
    transform: rotate(180deg);
}
100% {
    transform: rotate(360deg);
}
}

Đây chỉ là bài viết ngắn gọn, mình mong là nó sẽ thực sự hữu ích cho những bạn mới bước đầu làm quen với thiết kế web. Hãy share cho bạn bè để cùng nhau học hỏi nhé.

Tags: css3 loading

Chuyên Mục: Css, HTML5

Bài viết được đăng bởi webmaster

Bài liên quan

Tạo Flyout Image Slider với jQuery & CSS3

Flyout Image Slider là một hiệu ứng chuyển ảnh dựa vào các hình được xếp chồng lên nhau, và khi chúng ta click một trong những tấm hình nào, thì tấm hình đó sẽ được đưa lên phía trước , đồng thời các hình còn lại sẽ được sắp xếp lại theo thứ tự. Để hiểu rõ hơn, các bạn có thể xem demo bên dưới. ...

Bùi Văn Nam viết 2 tuần trước

Cách lấy Video làm Background với HTML5 & CSS

Thông thường, để tạo nền cho web, chúng ta thường dùng hình ảnh hoặc màu sắc. Nhưng có rất ít người biết rằng, chúng ta cũng hoàn toàn có thể lấy video làm nền cho web. Chỉ với một đoạn css cơ bản cùng với sự hỗ trợ của HTML5 là chúng ta có thể làm được điều này. Xem Demo | Download ...

Bùi Văn Nam viết 2 tuần trước

Responsive contact form với HTML5 và CSS3

Chúng ta vừa có một kì nghĩ lễ dài bên gia đình và bạn bè, và cũng đã đến lúc chúng ta lại bắt đầu việc học cho tương lai của mình. Để các bạn đỡ “ngán” , mình sẽ chia sẻ cho các bạn một mẫu form liên hệ với khả năng hiển thị tốt trên các loại thiết bị khác nhau (responsive), và các ...

Bùi Văn Nam viết 2 tuần trước

Loading icon cực sáng tạo với HTML5 & CSS3

Hôm nay mình sẽ mang đến cho các bạn thêm một mẫu loading rất dễ làm với sự kết hợp hoàn hảo giữa html và CSS3. Qua bài viết này, các bạn sẽ hiểu được cách tạo các hiệu ứng động đơn giản bằng CSS3 và có thể áp dụng hiệu ứng này ngay cho website hay blog mà các bạn đang quản lý. Xem Demo | ...

Bùi Văn Nam viết 2 tuần trước

Hiển thị lịch đơn giản với HTML5 và CSS3

Thông thường thì rất hiếm khi chúng ta bắt gặp những website hoặc blog nào hiển thị lịch trên trang web , tuy nhiên, sẽ rất là hữu ích nếu các ban tạo các web app. Bài viết mà mình giới thiệu cho các bạn ngày hôm nay sẽ là sự kết hợp giữa HTML5 và CSS3, qua bài viết này, các bạn cũng có thể hiểu ...

Hoàng Hải Đăng viết 2 tuần trước
0