Hướng dẫn loading css js - đang tải css js
|
Show
Loading trong website là hiệu ứng xuất hiện nhằm báo hiệu một hoạt động đang được trì hoãn hoặc đang được tiến hành và chưa hoàn thành. Có rất nhiều loại loading như:
Và kèm theo đó thì kiểu dán loading củng rất đa dạng:
Vậy hôm nay hãy cùng Lùn Dev đi xây dựng một hiệu ứng animation loading cho website sử dụng HTML CSS và Javascript nhé.  Hình minh họa kết quả Mô tả codeOpacity cho Hex colorNhằm sử dụng màu xắc một cách hiệu quả và mịn màng không chói mắt hơn. Trong bài tập này có sử dụng 1 kiểu code kết hợp bảng màu Hex color với opacity. Bạn có thể tham khảo nó tại đây.Hex color với opacity. Bạn có thể tham khảo nó tại đây. Biến trong CSSBài tập sử dụng sức mạnh của biến trong CSS nhằm làm đơn giản hóa vấn đề bằng cách khai báo một biến của element mẹ và sau đó để các element con kế thừa bằng việc sử dụng var. var. Khai báo biến ở element mẹ Element con kế thừa Để có thể sử dụng Javascript thay đổi giá trị của một biến được khai báo trong class sử dụng setProperty. Cách dùng như sau: Video hướng dẩn chi tiếtSource codeCode HTMLCode CSSCode JavascriptTải bản code đầy đủNội dung bài viết CSS loading page giờ đây chỉ cần sử dụng một thẻ div thôi. Vâng chỉ cần một thẻ DIV thôi, không có gì hơn. Không cần phải copy một tấn code nữa rồi. Anh em nhào zô!!! CSS loading là một thủ thuật giúp người dùng trải nghiệm ứng dụng mượt và không nhăn nhó mỗi khi phải chờ để lấy dữ liệu hoặc để cho họ viết ứng dụng đang hoạt động chứ không phải đơ như họ nghĩ. Trước khi mỗi lần làm css loader thì thật sự mà nói tôi copy một đống mã trên stackoverflow or github để đưa về ứng dụng của mình, sau đó lại chỉnh lại màu mè cho nó hợp. Giờ đây sau khi bài viết "I made 100 CSS loaders for your next project" của Temani Afif được đăng trên cộng đồng dev.to một trong số cộng đồng mà mỗi lập trình viên nên đọc mỗi ngày. Và thật sự là mới post lên được một ngày mà bài viết của Temani Afif đã đưa vào list trend, đấy người có tầm nó có khác và sau đây xin được repost lại cho anh em. Đọc bài gốc ở đây: dev.to
Webpack source map
Cài đặt và setting Webpack css loader
Để xử lý việc import CSS bên trong một file Javascript, chúng ta cần:
Cài đặt |
| Kết quả | Chỉnh lại file const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
newfile: [
'./src/index.js',
'./src/my-test.js'
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};0 với nội dung sau: |
|---|---|
| Tiến hành chạy lệnh npm để thực thi nội dung trên: | cd Webpack-project npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli |
Khi này click chạy file npm install --save-dev style-loader css-loader3 ta thấy nội dung bên trong npm install --save-dev style-loader css-loader4 đã được gọi: | npx webpack |
Lúc này xem lại nội dung bên trong npm install --save-dev style-loader css-loader3 vẫn không có gì thay đổi. | npx webpack --config webpack.config.js npm run build |
| Các lệnh chính đã sử dụng trong toàn bộ bài học | npm run build |
| Bài học | npm install --save lodash npm run build npm run build |
| Lệnh đã dùng | npm install --save-dev html-webpack-plugin npm run build |
| Cài đặt Webpack | import './style.css';
function component() {
const element = document.createElement('div');
element.innerHTML = 'Hello World!';
return element;
}
document.body.appendChild(component());0
|
| Webpack bundle | import './style.css';
function component() {
const element = document.createElement('div');
element.innerHTML = 'Hello World!';
return element;
}
document.body.appendChild(component());1
|
| Webpack Gom Chung Cácct File JavaScript | npm run build |
| Bản đồ nguồn webpack | import './style.css';
function component() {
const element = document.createElement('div');
element.innerHTML = 'Hello World!';
return element;
}
document.body.appendChild(component());1
|
| WebPack CSS Loader | import './style.css';
function component() {
const element = document.createElement('div');
element.innerHTML = 'Hello World!';
return element;
}
document.body.appendChild(component());4
|
