css loading animation code example
Example 1: css animation
<style>
.my-element {
width: 100%;
height: 100%;
animation: tween-color 5s infinite;
}
@keyframes tween-color {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: red;
}
}
html,
body {
height: 100%;
}
<style>
<body>
<div class="my-element"></div>
</body>
Example 2: css loader
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['to-string-loader', 'css-loader'],
},
],
},
};
Example 3: css loader
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'handlebars-loader', // handlebars loader expects raw resource string
'extract-loader',
'css-loader',
],
},
],
},
};
Example 4: css animation
Read this helpful, short and straightforward article to learn CSS animation perfectly.
https://medium.com/@Cafe_Code/learn-css-animation-asap-as-simple-as-possible-374b7874d4dd