Xin chào độc giả, Hôm nay trong blog này, bạn sẽ tìm hiểu cách tạo Trình tải vòng tròn với Hoạt ảnh dấu kiểm chỉ bằng HTML & CSS. Trước đó tôi đã chia sẻ một blog về cách tạo Trình tải sáng bóng thay đổi màu bằng HTML & CSS. Trình tải đó giống với trình tải này nhưng không có hoạt ảnh dấu kiểm trên trình tải đó. Nhưng trong chương trình này, có một hoạt ảnh dấu kiểm
Trình tải trước [còn được gọi là trình tải] là những gì bạn nhìn thấy trên màn hình trong khi phần nội dung còn lại của trang vẫn đang tải. Trình tải là hoạt ảnh đơn giản hoặc phức tạp được sử dụng để giúp khách truy cập và người xem nội dung của bạn được giải trí trong khi nội dung của trang vẫn đang tải
Trong chương trình này [Trình tải vòng tròn có Hoạt hình dấu kiểm], trình tải này xoay 360 độ vô hạn với việc thay đổi màu đường viền của nó tại một thời điểm nhất định nhưng khi bạn nhấp vào trình tải này, trình tải này sẽ ngừng quay và hiển thị biểu tượng dấu kiểm với
Nếu bạn cảm thấy khó hiểu những gì tôi đang nói. Bạn có thể xem video hướng dẫn đầy đủ về chương trình này [Trình tải vòng tròn có hoạt ảnh dấu kiểm]
Video hướng dẫn về Trình tải vòng tròn có hoạt ảnh dấu kiểm
Trong video, bạn đã thấy trình tải đổi màu với hoạt ảnh dấu kiểm. Nói chung, bất cứ khi nào chúng tôi muốn hoạt ảnh nhấp chuột, chúng tôi đã sử dụng chức năng sự kiện nhấp chuột của JavaScript nhưng trong chương trình này, tôi đã sử dụng thẻ hộp kiểm loại đầu vào HTML để tạo hoạt ảnh nhấp chuột và kiểm soát hộp kiểm này bằng thẻ nhãn như bạn đã thấy trong video.
Nếu bạn thích chương trình này [Circle Loader with Check-mark Animation] và muốn lấy mã nguồn. Bạn có thể dễ dàng lấy mã nguồn của chương trình này. Để lấy mã nguồn, bạn chỉ cần cuộn xuống. Bạn có thể sử dụng chương trình này trên các dự án, trang web và trang HTML của mình
bạn có thể thích điều này
- Hoạt hình đang tải Windows
- Thiết kế hoạt hình tải màn hình
- Trình tải vòng chuyển màu hoặc Trình tải trước
- Hoạt ảnh trình tải trước hình trái tim
Trình tải vòng tròn có hoạt ảnh dấu kiểm [Mã nguồn]
Để tạo chương trình này [Trình tải vòng tròn có Hoạt ảnh dấu kiểm]. Đầu tiên bạn cần tạo 2 File một File HTML và một File CSS. Sau khi tạo các tệp này, chỉ cần dán các mã sau vào tệp của bạn
Đầu tiên, tạo một tệp HTML có tên là chỉ mục. html và dán các mã đã cho vào tệp HTML của bạn. Hãy nhớ rằng, bạn phải tạo một tệp với. phần mở rộng html
Loader with Checkmark Animation | CodingNepal
Thứ hai, tạo một tệp CSS với tên kiểu. css và dán các mã đã cho vào tệp CSS của bạn. Hãy nhớ rằng, bạn phải tạo một tệp với. phần mở rộng css
@import url['//fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #000;
}
label{
position: relative;
height: 125px;
width: 125px;
display: inline-block;
border: 2px solid rgba[255,255,255,0.2];
border-radius: 50%;
border-left-color: #5cb85c;
animation: rotate 1.2s linear infinite;
}
@keyframes rotate {
50%{
border-left-color: #9b59b6;
}
75%{
border-left-color: #e67e22;
}
100%{
transform: rotate[360deg];
}
}
label .check-icon{
display: none;
}
label .check-icon:after{
position: absolute;
content: "";
top: 50%;
left: 28px;
transform: scaleX[-1] rotate[135deg];
height: 56px;
width: 28px;
border-top: 4px solid #5cb85c;
border-right: 4px solid #5cb85c;
transform-origin: left top;
animation: check-icon 0.8s ease;
}
@keyframes check-icon {
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;
}
}
input{
display: none;
}
input:checked ~ label .check-icon{
display: block;
}
input:checked ~ label{
animation: none;
border-color: #5cb85c;
transition: border 0.5s ease-out;
}Vậy là xong, bây giờ bạn đã tạo thành công Trình tải vòng tròn với Hoạt ảnh dấu kiểm chỉ bằng HTML & CSS. Nếu mã của bạn không hoạt động hoặc bạn gặp phải bất kỳ lỗi/sự cố nào, vui lòng bình luận xuống hoặc liên hệ với chúng tôi từ trang liên hệ
Kiểm tra Biểu tượng dấu kiểm và dấu chéo hoạt hình này bằng cách sử dụng css Được thiết kế bởi Lee Porter
Dấu kiểm hoạt hình & Chữ thập
HTML
[ngôn ngữ mã=”html”]
Oh Yeah!
Bummer!
[/code]
CSS / ÍT
[code language=”css”]
svg {
width. 100px;
hiển thị. chặn;
lề. 40px tự động 0;
}
.path {
stro-dasharray. 1000;
độ lệch nét gạch ngang. 0;
&. hình tròn {
-webkit-animation. dấu gạch ngang. 9s dễ dàng ra vào;
hình ảnh động. dấu gạch ngang. 9s dễ dàng ra vào;
}
&. dòng {
skill-dashoffset. 1000;
-webkit-animation. dấu gạch ngang. 9s. Chuyển tiếp dễ dàng trong 35 giây;
hoạt ảnh. dấu gạch ngang. 9s. Chuyển tiếp dễ dàng trong 35 giây;
}
&. kiểm tra {
stroke-dashoffset. -100;
-webkit-animation. dấu gạch ngang. 9s. Chuyển tiếp dễ dàng 35s;
hoạt ảnh. dấu gạch ngang. 9s. Chuyển tiếp dễ dàng trong 35 giây;
}
}
p {
căn chỉnh văn bản. trung tâm;
lề. 20px 0 60px;
cỡ chữ. 1. 25em;
&. thành công {
color. #73AF55;
}
&. lỗi {
màu. #D06079;
}
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset. 1000;
}
100% {
Stro-dashoffset. 0;
}
}
@keyframes dash {
0% {
stroke-dashoffset. 1000;
}
100% {
Stro-dashoffset. 0;
}
}
@-webkit-keyframes dash-check {
0% {
stroke-dashoffset. -100;
}
100% {
stroke-dashoffset. 900;
}
}
@keyframes dash-check {
0% {
stroke-dashoffset. -100;
}
100% {
stroke-dashoffset. 900;
}
}
[/mã số]
Kiểm tra đánh dấu và đóng đoạn trích hoạt hình biểu tượng
Xem Dấu kiểm hoạt hình và Dấu chéo của Lee Porter
[@elevaunt] trên CodePen.