andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Travis build: 510

Browse Source
This commit is contained in:
30secondsofcode
2019-10-06 04:28:50 +00:00
parent 3fe00e9d1e
commit 0f3d219665
3 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
snippet_data/snippetList.json
View File

@ -569,6 +569,21 @@
"hash": "fb3a96cbbb4d59af2566f3d0729c13478a81a572b25a8dd1696e2a67dd8fff79"
}
},
{
"id": "pulse-loader",
"type": "snippetListing",
"title": "Pulse loader",
"attributes": {
"text": "Creates a pulse effect loader animation using the `animation-delay` property.\n\n",
"tags": [
"animation",
"beginner"
]
},
"meta": {
"hash": "11f0b0631cb97ab53a144c263648c155527e570e0ceefaea59201c39de73b57b"
}
},
{
"id": "reset-all-styles",
"type": "snippetListing",

27
snippet_data/snippets.json
View File

@ -1049,6 +1049,33 @@
"hash": "fb3a96cbbb4d59af2566f3d0729c13478a81a572b25a8dd1696e2a67dd8fff79"
}
},
{
"id": "pulse-loader",
"title": "Pulse loader",
"type": "snippet",
"attributes": {
"fileName": "pulse-loader.md",
"text": "Creates a pulse effect loader animation using the `animation-delay` property.\n\n",
"explanation": "\n\n- Use `@keyframes` to define an animation at two points in the cycle, start (`0%`), where the two `<div>` elements have no `width` or `height` and are positioned at the center and end (`100%`), where both `<div>` elements have increased `width` and `height`, but their `position` is reset to `0`.\n- Use `opacity` to transition from `1` to `0` when animating to give the `<div>` elements a disappearing effect as they expand.\n- `.ripple-loader`, which is the parent container, has a predefined `width` and `height`. It uses `position: relative` to position its children.\n- Use `animation-delay` on the second `<div>` element, so that each element starts its animation at a different time.\n\n",
"browserSupport": {
"text": "\n\n- https://caniuse.com/#feat=css-animation\n",
"supportPercentage": 100
},
"codeBlocks": {
"html": "<div class=\"ripple-loader\">\n <div></div>\n <div></div>\n</div>",
"css": ".ripple-loader {\n position: relative;\n width: 64px;\n height: 64px;\n}\n\n.ripple-loader div {\n position: absolute;\n border: 4px solid #76ff03;\n border-radius: 50%;\n animation: ripple-loader 1s ease-out infinite;\n}\n\n.ripple-loader div:nth-child(2) {\n animation-delay: -0.5s;\n}\n\n@keyframes ripple-loader {\n 0% {\n top: 32px;\n left: 32px;\n width: 0;\n height: 0;\n opacity: 1;\n }\n 100% {\n top: 0;\n left: 0;\n width: 64px;\n height: 64px;\n opacity: 0;\n }\n}",
"js": "",
"scopedCss": "[data-scope=\"pulse-loader\"] .ripple-loader {\n position: relative;\n width: 64px;\n height: 64px; }\n\n[data-scope=\"pulse-loader\"] .ripple-loader div {\n position: absolute;\n border: 4px solid #76ff03;\n border-radius: 50%;\n animation: ripple-loader 1s ease-out infinite; }\n\n[data-scope=\"pulse-loader\"] .ripple-loader div:nth-child(2) {\n animation-delay: -0.5s; }\n\n@keyframes ripple-loader {\n 0% {\n top: 32px;\n left: 32px;\n width: 0;\n height: 0;\n opacity: 1; }\n 100% {\n top: 0;\n left: 0;\n width: 64px;\n height: 64px;\n opacity: 0; } }\n"
},
"tags": [
"animation",
"beginner"
]
},
"meta": {
"hash": "11f0b0631cb97ab53a144c263648c155527e570e0ceefaea59201c39de73b57b"
}
},
{
"id": "reset-all-styles",
"title": "Reset all styles",