{"id":366526,"date":"2022-06-24T13:00:29","date_gmt":"2022-06-24T20:00:29","guid":{"rendered":"https:\/\/css-tricks.com\/?p=366526"},"modified":"2023-08-27T17:51:25","modified_gmt":"2023-08-28T00:51:25","slug":"single-element-loaders-the-bars","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/single-element-loaders-the-bars\/","title":{"rendered":"Single Element Loaders: The Bars"},"content":{"rendered":"\n<p><a href=\"https:\/\/css-tricks.com\/single-element-loaders-the-spinner\/\">We\u2019ve looked at spinners.<\/a> <a href=\"https:\/\/css-tricks.com\/single-element-loaders-the-dots\/\">We\u2019ve looked at dots.<\/a> Now we\u2019re going to tackle another common pattern for loaders: <strong>bars<\/strong>. And we\u2019re going to do the same thing in this third article of the series as we have the others by making it with only one element and with flexible CSS that makes it easy to create variations.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-group ticss-ad1a3c1b\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><h4 class=\"wp-block-heading\" id=\"article-series\">Article series<\/h4>\n\n\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/single-element-loaders-the-spinner\/\">Single Element Loaders: The Spinner<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/single-element-loaders-the-dots\/\">Single Element Loaders: The Dots<\/a><\/li>\n\n\n\n<li>Single Element Loaders: The Bars \u2014 <em>you are here<\/em><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/single-element-loaders-going-3d\/\">Single Element Loaders: Going 3D<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p>Let\u2019s start with not one, not two, but 20 examples of bar loaders.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdWVOrR\" src=\"\/\/codepen.io\/anon\/embed\/preview\/mdWVOrR?height=450&amp;theme-id=1&amp;slug-hash=mdWVOrR&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdWVOrR\" title=\"CodePen Embed mdWVOrR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYZppdN\" src=\"\/\/codepen.io\/anon\/embed\/preview\/zYZppdN?height=450&amp;theme-id=1&amp;slug-hash=zYZppdN&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYZppdN\" title=\"CodePen Embed zYZppdN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>What?! Are you going to detail each one of them? That\u2019s too much for an article!<\/p>\n<\/blockquote>\n\n\n\n<p>It might seem like that at first glance! But all of them rely on the same code structure and we only update a few values to create variations. That\u2019s all the power of CSS. We don\u2019t learn how to create one loader, but we learn different techniques that allow us to create as much loader as we want using merely the same code structure.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"lets-make-some-bars\">Let\u2019s make some bars!<\/h3>\n\n\n<p>We start by defining the dimensions for them using <code>width<\/code> (or <code>height<\/code>) with <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/aspect-ratio\/\"><code>aspect-ratio<\/code><\/a> to maintain proportion:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.bars {\n  width: 45px;\n  aspect-ratio: 1;\n}<\/code><\/pre>\n\n\n\n<p>We sort of \u201cfake\u201d three bars with a linear gradient on the background \u2014 very similar to how we created dot loaders in Part 2 of this series.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.bars {\n  width: 45px;\n  aspect-ratio: 1;\n  --c: no-repeat linear-gradient(#000 0 0); \/* we define the color here *\/\n  background: \n    var(--c) 0%   50%,\n    var(--c) 50%  50%,\n    var(--c) 100% 50%;\n  background-size: 20% 100%; \/* 20% * (3 bars + 2 spaces) = 100% *\/\n}<\/code><\/pre>\n\n\n\n<p>The above code will give us the following result:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"486\" height=\"424\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651523850750_image.png?resize=486%2C424&#038;ssl=1\" alt=\"\" class=\"wp-image-366527\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651523850750_image.png?w=486&amp;ssl=1 486w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651523850750_image.png?resize=300%2C262&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Like the other articles in this series, we are going to deal with a lot of <code>background<\/code> trickery. So, if you ever feel like we\u2019re jumping around too fast or feel you need a little more detail, please do check those out. You can also read my <a href=\"https:\/\/stackoverflow.com\/a\/51734530\/8620333\" rel=\"noopener\">Stack Overflow answer where I give<\/a> <a href=\"https:\/\/stackoverflow.com\/a\/51734530\/8620333\" rel=\"noopener\">a detailed explanation<\/a> on how all this works.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"animating-the-bars\">Animating the bars<\/h3>\n\n\n<p>We either animate the element\u2019s size or position to create the bar loader. Let\u2019s animate the size by defining the following animation keyframes:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes load {\n  0%   { background-size: 20% 100%, 20% 100%, 20% 100%; }  \/* 1 *\/\n  33%  { background-size: 20% 10% , 20% 100%, 20% 100%; }  \/* 2 *\/\n  50%  { background-size: 20% 100%, 20% 10% , 20% 100%; }  \/* 3 *\/\n  66%  { background-size: 20% 100%, 20% 100%, 20% 10%;  }  \/* 4 *\/\n  100% { background-size: 20% 100%, 20% 100%, 20% 100%; }  \/* 5 *\/\n}<\/code><\/pre>\n\n\n\n<p>See what\u2019s happening there? Between 0% and 100%, the animation changes the <code>background-size<\/code> of the element\u2019s background gradient. Each keyframe sets three background sizes (one for each gradient).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"911\" height=\"176\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651524284295_image.png?resize=911%2C176&#038;ssl=1\" alt=\"\" class=\"wp-image-366528\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651524284295_image.png?w=911&amp;ssl=1 911w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651524284295_image.png?resize=300%2C58&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651524284295_image.png?resize=768%2C148&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>And here\u2019s what we get:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZErYBPd\" src=\"\/\/codepen.io\/anon\/embed\/ZErYBPd?height=450&amp;theme-id=1&amp;slug-hash=ZErYBPd&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZErYBPd\" title=\"CodePen Embed ZErYBPd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Can you start to imagine all the possible variations we can get by playing with different animation configurations for the sizes or the positions?<\/p>\n\n\n\n<p>Let\u2019s fix the size to <code>20% 50%<\/code> and update the positions this time:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader {\n  width: 45px;\n  aspect-ratio: .75;\n  --c: no-repeat linear-gradient(#000 0 0);\n  background: \n    var(--c),\n    var(--c),\n    var(--c);\n  background-size: 20% 50%;\n  animation: load 1s infinite linear;\n}\n@keyframes load {\n  0%   { background-position: 0% 100%, 50% 100%, 100% 100%; } \/* 1 *\/\n  20%  { background-position: 0% 50% , 50% 100%, 100% 100%; } \/* 2 *\/\n  40%  { background-position: 0% 0%  , 50% 50% , 100% 100%; } \/* 3 *\/\n  60%  { background-position: 0% 100%, 50% 0%  , 100% 50%;  } \/* 4 *\/\n  80%  { background-position: 0% 100%, 50% 100%, 100% 0%;   } \/* 5 *\/ \n  100% { background-position: 0% 100%, 50% 100%, 100% 100%; } \/* 6 *\/\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"923\" height=\"215\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651525274479_image.png?resize=923%2C215&#038;ssl=1\" alt=\"\" class=\"wp-image-366529\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651525274479_image.png?w=923&amp;ssl=1 923w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651525274479_image.png?resize=300%2C70&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651525274479_image.png?resize=768%2C179&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>\u2026which gets us another loader!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOvbgpe\" src=\"\/\/codepen.io\/anon\/embed\/gOvbgpe?height=450&amp;theme-id=1&amp;slug-hash=gOvbgpe&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOvbgpe\" title=\"CodePen Embed gOvbgpe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>You\u2019ve probably got the trick by now. All you need is to define a timeline that you translate into a keyframe. By animating the size, the position \u2014 or both! \u2014 there\u2019s an infinite number of loader possibilities at our fingertips.<\/p>\n\n\n\n<p>And once we get comfortable with such a technique we can go further and use a more complex gradient to create even <em>more<\/em> loaders.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYxvxrV\" src=\"\/\/codepen.io\/anon\/embed\/preview\/vYxvxrV?height=450&amp;theme-id=1&amp;slug-hash=vYxvxrV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYxvxrV\" title=\"CodePen Embed vYxvxrV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Expect for the last two examples in that demo, all of the bar loaders use the same underlying markup and styles and different combinations of animations. Open the code and try to visualize each frame independently; you\u2019ll see how relatively trivial it is to make dozens \u2014 <a href=\"https:\/\/css-loaders.com\/\" rel=\"noopener\">if not hundreds<\/a> \u2014 of variations.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"getting-fancy\">Getting fancy<\/h3>\n\n\n<p>Did you remember the mask trick we did with the dot loaders in <a href=\"https:\/\/css-tricks.com\/single-element-loaders-the-dots\">the second article of this series<\/a>? We can do the same here!<\/p>\n\n\n\n<p>If we apply all the above logic inside the <code>mask<\/code> property we can use any background configuration to add a fancy coloration to our loaders.<\/p>\n\n\n\n<p>Let\u2019s take one demo and update it:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaYqggw\" src=\"\/\/codepen.io\/anon\/embed\/BaYqggw?height=450&amp;theme-id=1&amp;slug-hash=BaYqggw&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaYqggw\" title=\"CodePen Embed BaYqggw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>All I did is updating all the <code>background-*<\/code> with <code>mask-*<\/code> and I added a gradient coloration. As simple as that and yet we get another cool loader.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>So there is no difference between the dots and the bars?<\/p>\n<\/blockquote>\n\n\n\n<p>No difference! I wrote two different articles to cover as many examples as possible but in both, I am relying on the same techniques:<\/p>\n\n\n\n<ol>\n<li>Gradients to create the shapes (dots or bars or maybe something else)<\/li>\n\n\n\n<li>Animating <code>background-size<\/code> and\/or <code>background-position<\/code> to create the loader animation<\/li>\n\n\n\n<li>Adding mask to add a touch of colors<\/li>\n<\/ol>\n\n\n<h3 class=\"wp-block-heading\" id=\"rounding-the-bars\">Rounding the bars<\/h3>\n\n\n<p>Let\u2019s try something different this time where we can round the edges of our bars.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoEeMYO\" src=\"\/\/codepen.io\/anon\/embed\/preview\/PoEeMYO?height=450&amp;theme-id=1&amp;slug-hash=PoEeMYO&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoEeMYO\" title=\"CodePen Embed PoEeMYO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Using one element and its <code>::before<\/code> and <code>::after<\/code> pseudos, we define three identical bars:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader {\n  --s: 100px; \/* control the size *\/\n\n  display: grid;\n  place-items: center;\n  place-content: center;\n  margin: 0 calc(var(--s) \/ 2); \/* 50px *\/\n}\n.loader::before,\n.loader::after {\n  content: \"\";\n  grid-area: 1\/1;\n}\n.loader,\n.loader::before,\n.loader::after {\n  height: var(--s);\n  width: calc(var(--s) \/ 5); \/* 20px *\/\n  border-radius: var(--s);\n  transform: translate(calc(var(--_i, 0) * 200%));\n}\n.loader::before { --_i: -1; }\n.loader::after { --_i:  1; }<\/code><\/pre>\n\n\n\n<p>That gives us three bars, this time without relying on a linear gradient:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"448\" height=\"553\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651609226578_image.png?resize=448%2C553&#038;ssl=1\" alt=\"\" class=\"wp-image-366530\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651609226578_image.png?w=448&amp;ssl=1 448w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651609226578_image.png?resize=243%2C300&amp;ssl=1 243w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Now the trick is to fill in those bars with a lovely gradient. To simulate a continuous gradient, we need to play with <code>background<\/code> properties. In the above figure, the green area defines the area covered by the loader. That area should be the size of the gradient and, if we do the math, it\u2019s equal to multiplying both sides labeled <code>S<\/code> in the diagram, or <code>background-size: var(--s) var(--s)<\/code>.<\/p>\n\n\n\n<p>Since our elements are individually placed, we need to update the position of the gradient inside each one to make sure all of them overlap. This way, we\u2019re simulating one continuous gradient even though it\u2019s really three of them.<\/p>\n\n\n\n<p>For the main element (placed at the center), the background needs to be at the center. We use the following:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader {\n  \/* etc. *\/\n  background: linear-gradient() 50% \/ var(--s) var(--s);\n}<\/code><\/pre>\n\n\n\n<p>For the pseudo-element on the left, we need the background on the left<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader::before {\n  \/* etc. *\/\n  background: linear-gradient() 0% \/ var(--s) var(--s);\n}<\/code><\/pre>\n\n\n\n<p>And for the pseudo on the right, the background needs to be positioned to the right:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader::after {\n  background: linear-gradient() 100% \/ var(--s) var(--s);\n}<\/code><\/pre>\n\n\n\n<p>Using the same CSS variable, <code>--_i<\/code>, that we used for the translate, we can write the code like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"3,20\"><code markup=\"tt\">.loader {\n  --s: 100px; \/* control the size *\/\n  --c: linear-gradient(\/* etc. *\/); \/* control the coloration *\/\n\n  display: grid;\n  place-items: center;\n  place-content: center;\n}\n.loader::before,\n.loader::after{\n  content: \"\";\n  grid-area: 1\/1;\n}\n.loader,\n.loader::before,\n.loader::after{\n  height: var(--s);\n  width: calc(var(--s) \/ 5);\n  border-radius: var(--s);\n  background: var(--c) calc(50% + var(--_i, 0) * 50%) \/ var(--s) var(--s);\n  transform: translate(calc(var(--_i, 0) * 200%));\n}\n.loader::before { --_i: -1; }\n.loader::after  { --_i:  1; }<\/code><\/pre>\n\n\n\n<p>Now, all we have to do is to animate the height and add some delays! Here are three examples where all that\u2019s different are the colors and sizes:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBxEzeV\/bdae7decca2724c24e7dc97c534d7847\" src=\"\/\/codepen.io\/anon\/embed\/preview\/qBxEzeV\/bdae7decca2724c24e7dc97c534d7847?height=450&amp;theme-id=1&amp;slug-hash=qBxEzeV\/bdae7decca2724c24e7dc97c534d7847&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBxEzeV\/bdae7decca2724c24e7dc97c534d7847\" title=\"CodePen Embed qBxEzeV\/bdae7decca2724c24e7dc97c534d7847\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"wrapping-up\">Wrapping up<\/h3>\n\n\n<p>I hope so far you are feeling super encouraged by all the powers you have <a href=\"https:\/\/css-loaders.com\/\" rel=\"noopener\">to make complex-looking loading animations<\/a>. All we need is one element, either gradients or pseudos to draw the bars, then some keyframes to move things around. That\u2019s the entire recipe for getting an endless number of possibilities, so go out and starting cooking up some neat stuff!<\/p>\n\n\n\n<p>Until the next article, I will leave you with a funny collection of loaders where I am combining <strong>the dots<\/strong> and <strong>the bars<\/strong>!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOmooGQ\" src=\"\/\/codepen.io\/anon\/embed\/preview\/gOmooGQ?height=450&amp;theme-id=1&amp;slug-hash=gOmooGQ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOmooGQ\" title=\"CodePen Embed gOmooGQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBrLrMo\" src=\"\/\/codepen.io\/anon\/embed\/preview\/qBrLrMo?height=450&amp;theme-id=1&amp;slug-hash=qBrLrMo&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBrLrMo\" title=\"CodePen Embed qBrLrMo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group ticss-ad1a3c1b\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><h4 class=\"wp-block-heading\" id=\"article-series\">Article series<\/h4>\n\n\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/single-element-loaders-the-spinner\/\">Single Element Loaders: The Spinner<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/single-element-loaders-the-dots\/\">Single Element Loaders: The Dots<\/a><\/li>\n\n\n\n<li>Single Element Loaders: The Bars \u2014 <em>you are here<\/em><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/single-element-loaders-going-3d\/\">Single Element Loaders: Going 3D<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve looked at spinners. We\u2019ve looked at dots. Now we\u2019re going to tackle another common pattern for loaders: bars. And we\u2019re going to do the same thing in this third article of the series as we have the others by making it with only one element and with flexible CSS that makes it easy to [&hellip;]<\/p>\n","protected":false},"author":281881,"featured_media":366532,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Lots of ya have been waiting for the third article in @ChallengesCSS's series on single element loaders... here it is!","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[708,1027,802,1154,1147],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/loaders-bars.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":366342,"url":"https:\/\/css-tricks.com\/single-element-loaders-the-dots\/","url_meta":{"origin":366526,"position":0},"title":"Single Element Loaders: The Dots","date":"June 17, 2022","format":false,"excerpt":"We\u2019re looking at loaders in this series. More than that, we\u2019re breaking down some common loader patterns and how to re-create them with nothing more than a single div. So far, we\u2019ve picked apart the classic spinning loader. Now, let\u2019s look at another one you\u2019re likely well aware of: the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/dots-loader.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366266,"url":"https:\/\/css-tricks.com\/single-element-loaders-the-spinner\/","url_meta":{"origin":366526,"position":1},"title":"Single Element Loaders: The Spinner","date":"June 10, 2022","format":false,"excerpt":"Making CSS-only loaders is one of my favorite tasks. It\u2019s always satisfying to look at those infinite animations. And, of course, there are lots of techniques and approaches to make them \u2014 no need to look further than CodePen to see just how many. In this article, though, we will\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/loaders-spinners.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366544,"url":"https:\/\/css-tricks.com\/single-element-loaders-going-3d\/","url_meta":{"origin":366526,"position":2},"title":"Single Element Loaders: Going 3D!","date":"July 1, 2022","format":false,"excerpt":"For this\u00a0fourth and\u00a0final\u00a0article of our\u00a0little series\u00a0on single-element loaders, we are going to explore 3D patterns. When creating a 3D element, it\u2019s hard to imagine that\u00a0just\u00a0one\u00a0HTML\u00a0element\u00a0is\u00a0enough to simulate\u00a0something like all\u00a0six\u00a0faces of a cube. But \u00a0maybe we can get away with something more cube-like\u00a0instead by showing only the front three sides of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/cube-loader.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335002,"url":"https:\/\/css-tricks.com\/a-bare-bones-approach-to-versatile-and-reusable-skeleton-loaders\/","url_meta":{"origin":366526,"position":3},"title":"A Bare-Bones Approach to Versatile and Reusable Skeleton Loaders","date":"March 3, 2021","format":false,"excerpt":"UI components like spinners and skeleton loaders make waiting for a page load less frustrating and might even affect how loading times are perceived when used correctly. They won\u2019t completely prevent users from abandoning the website, but they might encourage them to wait a bit longer. Animated spinners are used\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/skeleton-loader.gif?fit=900%2C450&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350223,"url":"https:\/\/css-tricks.com\/how-i-made-a-generator-for-svg-loaders-with-sass-and-smil-options\/","url_meta":{"origin":366526,"position":4},"title":"How I Made a Generator for SVG Loaders With Sass and SMIL Options","date":"August 26, 2021","format":false,"excerpt":"While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let\u2019s take a look at one of those tools: a generator that makes SVG loaders and lets you choose between SMIL or Sass animation, different styles, colors,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/custom-loader.gif?fit=1200%2C727&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320479,"url":"https:\/\/css-tricks.com\/import-non-esm-libraries-in-es-modules-with-client-side-vanilla-js\/","url_meta":{"origin":366526,"position":5},"title":"Import Non-ESM libraries in ES Modules, with Client-Side Vanilla JS","date":"September 7, 2020","format":false,"excerpt":"We're living through a weird era where there are tons of JavaScript libraries that were meant to be used as <script> tags that expose available globals. AND there are tons of JavaScript libraries that are meant to be used through module loaders. AND there are tons of JavaScript libraries that\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/js-es6.jpg?fit=1200%2C700&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/loaders-bars.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366526"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/281881"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=366526"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366526\/revisions"}],"predecessor-version":[{"id":377537,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366526\/revisions\/377537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/366532"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=366526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=366526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=366526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}