{"id":1280,"date":"2023-04-21T10:47:00","date_gmt":"2023-04-21T07:47:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1280"},"modified":"2023-04-13T11:42:59","modified_gmt":"2023-04-13T08:42:59","slug":"simple-css-loaders","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/loader\/1280\/","title":{"rendered":"Simple CSS loaders"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"722\" style=\"aspect-ratio: 1210 \/ 722;\" width=\"1210\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/04\/vokoscreenng-2023-04-11_21-46-33.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">  &lt;div class=&quot;page&quot;&gt;\n    &lt;header class=&quot;header&quot;&gt;\n      &lt;h1 class=&quot;header-title&quot;&gt;Simple CSS loaders&lt;\/h1&gt;\n      &lt;p class=&quot;header-subtitle&quot;&gt;single html element css animation&lt;\/p&gt;\n    &lt;\/header&gt;\n    \n    &lt;main class=&quot;container&quot;&gt;\n      &lt;div class=&quot;item&quot;&gt;\n        &lt;i class=&quot;loader --2&quot;&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;item&quot;&gt;\n        &lt;i class=&quot;loader --9&quot;&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;item&quot;&gt;\n        &lt;i class=&quot;loader --3&quot;&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n      \n      &lt;div class=&quot;item&quot;&gt;\n        &lt;i class=&quot;loader --4&quot;&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;item&quot;&gt;\n        &lt;i class=&quot;loader --1&quot;&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;item&quot;&gt;\n        &lt;i class=&quot;loader --5&quot;&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n      \n      &lt;div class=&quot;item&quot;&gt;\n        &lt;i class=&quot;loader --6&quot;&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;item&quot;&gt;\n        &lt;i class=&quot;loader --8&quot;&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;item&quot;&gt;\n        &lt;i class=&quot;loader --7&quot;&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n    &lt;\/main&gt;\n  &lt;\/div&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">.loader {\n\t--color: white;\n\t--size-mid: 6vmin;\n\t--size-dot: 1.5vmin;\n\t--size-bar: 0.4vmin;\n\t--size-square: 3vmin;\n\t\n\tdisplay: block;\n\tposition: relative;\n\twidth: 50%;\n\tdisplay: grid;\n\tplace-items: center;\n}\n\n.loader::before,\n.loader::after {\n\tcontent: '';\n\tbox-sizing: border-box;\n\tposition: absolute;\n}\n\n\/**\n\tloader --1\n**\/\n.loader.--1::before {\n\twidth: var(--size-mid);\n\theight: var(--size-mid);\n\tborder: 4px solid var(--color);\n\tborder-top-color: transparent;\n\tborder-radius: 50%;\n\tanimation: loader-1 1s linear infinite;\n}\n\n.loader.--1::after {\n\twidth: calc(var(--size-mid) - 2px);\n\theight: calc(var(--size-mid) - 2px);\n\tborder: 2px solid transparent;\n\tborder-top-color: var(--color);\n\tborder-radius: 50%;\n\tanimation: loader-1 0.6s linear reverse infinite;\n}\n\n@keyframes loader-1 {\n\t100% {\n\t\ttransform: rotate(1turn);\n\t}\n}\n\n\/**\n\tloader --2\n**\/\n.loader.--2::before,\n.loader.--2::after {\n\twidth: var(--size-dot);\n\theight: var(--size-dot);\n\tbackground-color: var(--color);\n\tborder-radius: 50%;\n\topacity: 0;\n\tanimation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;\n}\n\n.loader.--2::after {\n\tanimation-delay: 0.3s;\n}\n\n@keyframes loader-2 {\n\t0%, 80%, 100% {\n\t\topacity: 0;\n\t}\n\t\n\t33% {\n\t\topacity: 1;\n\t}\n\t\n\t0%, 100% {\n\t\ttransform: translateX(-4vmin);\n\t}\n\t\n\t90% {\n\t\ttransform: translateX(4vmin);\n\t}\n}\n\n\/**\n\tloader --3\n**\/\n.loader.--3::before,\n.loader.--3::after {\n\twidth: var(--size-dot);\n\theight: var(--size-dot);\n\tbackground-color: var(--color);\n\tborder-radius: 50%;\n\tanimation: loader-3 1.2s ease-in-out infinite;\n}\n\n.loader.--3::before {\n\tleft: calc(50% - 1.6vmin - var(--size-dot));\n}\n\n.loader.--3::after {\n\tleft: calc(50% + 1.6vmin);\n\tanimation-delay: -0.4s;\n}\n\n@keyframes loader-3 {\n\t0%, 100% {\n\t\ttransform: translateY(-2.6vmin);\n\t}\n\t\n\t44% {\n\t\ttransform: translateY(2.6vmin);\n\t}\n}\n\n\/**\n\tloader --4\n**\/\n.loader.--4::before {\n\theight: var(--size-bar);\n\twidth: 6vmin;\n\tbackground-color: var(--color);\n\tanimation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;\n}\n\n@keyframes loader-4 {\n\t0%, 44%, 88.1%, 100% {\n\t\ttransform-origin: left;\n\t}\n\t\n\t0%, 100%, 88% {\n\t\ttransform: scaleX(0);\n\t}\n\t\n\t44.1%, 88% {\n\t\ttransform-origin: right;\n\t}\n\t\n\t33%, 44% {\n\t\ttransform: scaleX(1);\n\t}\n}\n\n\/**\n\tloader --5\n**\/\n.loader.--5::before,\n.loader.--5::after {\n\theight: 3vmin;\n\twidth: var(--size-bar);\n\tbackground-color: var(--color);\n\tanimation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;\n}\n\n.loader.--5::before {\n\tleft: calc(50% - 1vmin);\n\ttop: calc(50% - 3vmin);\n}\n\n.loader.--5::after {\n\tleft: calc(50% + 1vmin);\n\ttop: calc(50% - 1vmin);\n\tanimation-delay: 0.2s;\n}\n\n@keyframes loader-5 {\n\t0%, 88%, 100% {\n\t\topacity: 0;\n\t}\n\t\n\t0% {\n\t\ttransform: translateY(-6vmin);\n\t}\n\t\n\t33% {\n\t\topacity: 1;\n\t}\n\t\n\t33%, 88% {\n\t\ttransform: translateY(3vmin);\n\t}\n}\n\n\/**\n\tloader --6\n**\/\n.loader.--6::before {\n\twidth: var(--size-square);\n\theight: var(--size-square);\n\tbackground-color: var(--color);\n\ttop: calc(50% - var(--size-square));\n\tleft: calc(50% - var(--size-square));\n\tanimation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;\n}\n\n@keyframes loader-6 {\n\t0%, 100% {\n\t\ttransform: none;\n\t}\n\t\n\t25% {\n\t\ttransform: translateX(100%);\n\t}\n\t\n\t50% {\n\t\ttransform: translateX(100%) translateY(100%);\n\t}\n\t\n\t75% {\n\t\ttransform: translateY(100%);\n\t}\n}\n\n\/**\n\tloader --7\n**\/\n.loader.--7::before,\n.loader.--7::after {\n\twidth: var(--size-square);\n\theight: var(--size-square);\n\tbackground-color: var(--color);\n}\n\n.loader.--7::before {\n\ttop: calc(50% - var(--size-square));\n\tleft: calc(50% - var(--size-square));\n\tanimation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;\n}\n\n.loader.--7::after {\n\ttop: 50%;\n\tleft: 50%;\n\tanimation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;\n}\n\n@keyframes loader-7 {\n\t0%, 100% {\n\t\ttransform: none;\n\t}\n\t\n\t25% {\n\t\ttransform: translateX(-100%);\n\t}\n\t\n\t50% {\n\t\ttransform: translateX(-100%) translateY(-100%);\n\t}\n\t\n\t75% {\n\t\ttransform: translateY(-100%);\n\t}\n}\n\n\/**\n\tloader --8\n**\/\n.loader.--8::before,\n.loader.--8::after {\n\twidth: var(--size-dot);\n\theight: var(--size-dot);\n\tborder-radius: 50%;\n\tbackground-color: var(--color);\n}\n\n.loader.--8::before {\n\ttop: calc(50% + 4vmin);\n\tanimation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;\n}\n\n.loader.--8::after {\n\topacity: 0;\n\ttop: calc(50% - 2vmin);\n\tanimation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;\n}\n\n@keyframes loader-8-1 {\n\t0%, 55%, 100% {\n\t\topacity: 0;\n\t}\n\t\n\t0% {\n\t\ttransform: scale(0.2);\n\t}\n\t\n\t22% {\n\t\topacity: 1;\n\t}\n\t\n\t33%, 55% {\n\t\ttransform: scale(1) translateY(-6vmin);\n\t}\n}\n\n@keyframes loader-8-2 {\n\t0%, 100% {\n\t\topacity: 0;\n\t}\n\t\n\t33% {\n\t\topacity: 0.3;\n\t}\n\t\n\t0% {\n\t\ttransform: scale(0);\n\t}\n\t\n\t100% {\n\t\ttransform: scale(4);\n\t}\n}\n\n\/**\n\tloader --9\n**\/\n.loader.--9::before,\n.loader.--9::after {\n\twidth: var(--size-dot);\n\theight: var(--size-dot);\n\tborder-radius: 50%;\n\tbackground-color: var(--color);\n\tanimation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;\n}\n\n.loader.--9::before {\n\tleft: calc(50% - var(--size-dot) - 1.6vmin);\n}\n\n.loader.--9::after {\n\tleft: calc(50% + 1.6vmin);\n\tanimation-delay: 0.12s;\n}\n\n@keyframes loader-9 {\n\t0%, 100% {\n\t\topacity: 0;\n\t}\n\t\n\t0% {\n\t\ttransform: translate(-4vmin, -4vmin);\n\t}\n\t\n\t66% {\n\t\topacity: 1;\n\t}\n\t\n\t66%, 100% {\n\t\ttransform: none;\n\t}\n}\n\n\/**\n\tmiscs\n**\/\n\n.container {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(3, 18vmin);\n\tgrid-template-rows: repeat(3, 18vmin);\n\tgrid-gap: 1vmin;\n}\n\n.item\t{\n\tbackground: rgba(255, 255, 255, 0.1);\n\tdisplay: grid;\n\tplace-items: center;\n\tborder-radius: 4px;\n\ttransition: opacity 0.4s ease;\n}\n\n.container:hover .item {\n\topacity: 0.3;\n}\n\n.container:hover .item:hover {\n\topacity: 1;\n}\n\n.page {\n\tmargin: auto;\n}\n\n.header {\n\tmargin-bottom: 4vmin;\n}\n\n.header-title {\n\tfont-size: 3.75vmin;\n}\n\n.header-subtitle {\n\tfont-size: 2vmin;\n\ttext-transform: uppercase;\n\topacity: 0.6;\n}\n\nhtml, body {\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);\n\tfont-family: 'Noto Sans', sans-serif;\n\tcolor: white;\n\ttext-align: center;\n\tletter-spacing: 0.3px;\n}<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1281,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[16],"class_list":["post-1280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-loader","tag-htmlcss"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1280"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1280\/revisions"}],"predecessor-version":[{"id":1283,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1280\/revisions\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1281"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}