{"id":366342,"date":"2022-06-17T07:47:55","date_gmt":"2022-06-17T14:47:55","guid":{"rendered":"https:\/\/css-tricks.com\/?p=366342"},"modified":"2024-02-15T02:49:41","modified_gmt":"2024-02-15T10:49:41","slug":"single-element-loaders-the-dots","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/single-element-loaders-the-dots\/","title":{"rendered":"Single Element Loaders: The Dots"},"content":{"rendered":"\n<p>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 <a href=\"https:\/\/css-tricks.com\/single-element-loaders-the-spinner\/\">the classic spinning loader<\/a>. Now, let\u2019s look at another one you\u2019re likely well aware of: <strong>the dots.<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/css-loaders.com\/dots\/\" rel=\"noopener\">Dot loaders<\/a> are all over the place. They\u2019re neat because they usually consist of three dots that sort of look like a text ellipsis (\u2026) that dances around.<\/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>Single Element Loaders: The Dots \u2014 <em>you are here<\/em><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/single-element-loaders-the-bars\/\">Single Element Loaders: The Bars<\/a><\/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>Our goal here is to make this same thing out of a single div element. In other words, there is no one div per dot or individual animations for each dot.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxpyoqL\" src=\"\/\/codepen.io\/anon\/embed\/xxpyoqL?height=450&amp;theme-id=1&amp;slug-hash=xxpyoqL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxpyoqL\" title=\"CodePen Embed xxpyoqL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That example of a loader up above is made with a single div element, a few CSS declarations, and no pseudo-elements. I am combining two techniques using CSS <code>background<\/code> and <code>mask<\/code>. And when we\u2019re done, we\u2019ll see how animating a background gradient helps create the illusion of each dot changing colors as they move up and down in succession.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-background-animation\">The background animation<\/h3>\n\n\n<p>Let\u2019s start with the background animation:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader {\n  width: 180px; \/* this controls the size *\/\n  aspect-ratio: 8\/5; \/* maintain the scale *\/\n  background: \n    conic-gradient(red   50%, blue   0) no-repeat, \/* top colors *\/\n    conic-gradient(green 50%, purple 0) no-repeat; \/* bottom colors *\/\n  background-size: 200% 50%; \n  animation: back 4s infinite linear; \/* applies the animation *\/\n}\n\n\/* define the animation *\/\n@keyframes back {\n  0%,                       \/* X   Y , X     Y *\/\n  100% { background-position: 0%   0%, 0%   100%; }\n  25%  { background-position: 100% 0%, 0%   100%; }\n  50%  { background-position: 100% 0%, 100% 100%; }\n  75%  { background-position: 0%   0%, 100% 100%; }\n}<\/code><\/pre>\n\n\n\n<p>I hope this looks pretty straightforward. What we\u2019ve got is a <code>180px<\/code>-wide <code>.loader<\/code> element that shows two conic gradients sporting hard color stops between two colors each \u2014 the first gradient is red and blue along the top half of the <code>.loader<\/code>, and the second gradient is green and purple along the bottom half.<\/p>\n\n\n\n<p>The way the loader\u2019s background is sized (<code>200%<\/code> wide), we only see one of those colors in each half at a time. Then we have this little animation that pushes the position of those background gradients left, right, and back again forever and ever.<\/p>\n\n\n\n<p>When dealing with background properties \u2014 especially <code>background-position<\/code> \u2014 I always refer to my <a href=\"https:\/\/stackoverflow.com\/a\/51734530\/8620333\" rel=\"noopener\">Stack Overflow answer where I am giving a detailed explanation<\/a> on how all this works. If you are uncomfortable with CSS background trickery, I highly recommend reading that answer to help with what comes next.<\/p>\n\n\n\n<p>In the animation, notice that the first layer is <code>Y=0%<\/code> (placed at the top) while <code>X<\/code> is changes from <code>0%<\/code> to <code>100%.<\/code> For the second layer, we have the same for <code>X<\/code> but <code>Y=100%<\/code> (placed at the bottom).<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOvOjZy\" src=\"\/\/codepen.io\/anon\/embed\/gOvOjZy?height=450&amp;theme-id=1&amp;slug-hash=gOvOjZy&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOvOjZy\" title=\"CodePen Embed gOvOjZy\" 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>Why using a <code>conic-gradient()<\/code> instead of <code>linear-gradient()<\/code>?<\/p>\n<\/blockquote>\n\n\n\n<p>Good question! Intuitively, we should use a linear gradient to create a two-color gradients like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">linear-gradient(90deg, red 50%, blue 0)<\/code><\/pre>\n\n\n\n<p>But we can also reach for the same using a <code>conic-gradient()<\/code> \u2014 and with less of code. We reduce the code and also learn a new trick in the process!<\/p>\n\n\n\n<p>Sliding the colors left and right is a nice way to make it look like we\u2019re changing colors, but it might be better if we instantly change colors instead \u2014 that way, there\u2019s no chance of a loader dot flashing two colors at the same time. To do this, let&#8217;s change the <code>animation<\/code>&#8216;s timing function from <code>linear<\/code> to <code>steps(1)<\/code><\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKQKBYM\" src=\"\/\/codepen.io\/anon\/embed\/KKQKBYM?height=450&amp;theme-id=1&amp;slug-hash=KKQKBYM&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKQKBYM\" title=\"CodePen Embed KKQKBYM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-loader-dots\">The loader dots<\/h3>\n\n\n<p>If you followed along with the <a href=\"https:\/\/css-tricks.com\/single-element-loaders-the-spinner\/\">first article in this series<\/a>, I bet you know what comes next: <strong>CSS masks!<\/strong> What makes masks so great is that they let us sort of <a href=\"https:\/\/css-tricks.com\/clipping-masking-css\/\">\u201ccut out\u201d parts of a background<\/a> in the shape of another element. So, in this case, we want to make a few dots, show the background gradients through the dots, and cut out any parts of the background that are not part of a dot.<\/p>\n\n\n\n<p>We are going to use <code>radial-gradient()<\/code> for this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"4,5,6,7,8,9\"><code markup=\"tt\">.loader {\n  width: 180px;\n  aspect-ratio: 8\/5;\n  mask:\n    radial-gradient(#000 68%, #0000 71%) no-repeat,\n    radial-gradient(#000 68%, #0000 71%) no-repeat,\n    radial-gradient(#000 68%, #0000 71%) no-repeat;\n  mask-size: 25% 40%; \/* the size of our dots *\/\n}<\/code><\/pre>\n\n\n\n<p>There&#8217;s some duplicated code in there, so let&#8217;s make a CSS variable to slim things down:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"4\"><code markup=\"tt\">.loader {\n  width: 180px;\n  aspect-ratio: 8\/5;\n  --_g: radial-gradient(#000 68%, #0000 71%) no-repeat;\n  mask: var(--_g),var(--_g),var(--_g);\n  mask-size: 25% 40%;\n}<\/code><\/pre>\n\n\n\n<p>Cool cool. But now we need a new animation that helps move the dots up and down between the animated gradients.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader {\n  \/* same as before *\/\n  animation: load 2s infinite;\n}\n\n@keyframes load {      \/* X  Y,     X   Y,    X   Y *\/\n  0%     { mask-position: 0% 0%  , 50% 0%  , 100% 0%; } \/* all of them at the top *\/\n  16.67% { mask-position: 0% 100%, 50% 0%  , 100% 0%; }\n  33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; }\n  50%    { mask-position: 0% 100%, 50% 100%, 100% 100%; } \/* all of them at the bottom *\/\n  66.67% { mask-position: 0% 0%  , 50% 100%, 100% 100%; }\n  83.33% { mask-position: 0% 0%  , 50% 0%  , 100% 100%; }\n  100%   { mask-position: 0% 0%  , 50% 0%  , 100% 0%; } \/* all of them at the top *\/\n}<\/code><\/pre>\n\n\n\n<p>Yes, that\u2019s a total of three radial gradients in there, all with the same configuration and the same size \u2014 the animation will update the position of each one. Note that the <code>X<\/code> coordinate of each dot is fixed. The <code>mask-position<\/code> is defined such that the first dot is at the left (<code>0%<\/code>), the second one at the center (<code>50%<\/code>), and the third one at the right (<code>100%<\/code>). We only update the <code>Y<\/code> coordinate from <code>0%<\/code> to <code>100%<\/code> to make the dots dance.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"523\" height=\"362\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651441844341_image.png?resize=523%2C362&#038;ssl=1\" alt=\"Dot loader dots with labels showing their changing positions.\" class=\"wp-image-366345\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651441844341_image.png?w=523&amp;ssl=1 523w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651441844341_image.png?resize=300%2C208&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>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_abqbamK\" src=\"\/\/codepen.io\/anon\/embed\/abqbamK?height=450&amp;theme-id=1&amp;slug-hash=abqbamK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abqbamK\" title=\"CodePen Embed abqbamK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now, combine this with our gradient animation and magic starts to happen:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYdYzxq\" src=\"\/\/codepen.io\/anon\/embed\/vYdYzxq?height=450&amp;theme-id=1&amp;slug-hash=vYdYzxq&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYdYzxq\" title=\"CodePen Embed vYdYzxq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"dot-loader-variations\">Dot loader variations<\/h3>\n\n\n<p>The CSS variable we made in the last example makes it all that much easier to swap in new colors and create more variations of the same loader. For example, different colors and sizes:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poaoOww\" src=\"\/\/codepen.io\/anon\/embed\/poaoOww?height=450&amp;theme-id=1&amp;slug-hash=poaoOww&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poaoOww\" title=\"CodePen Embed poaoOww\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>What about another movement for our dots?<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoQLQXe\" src=\"\/\/codepen.io\/anon\/embed\/PoQLQXe?height=450&amp;theme-id=1&amp;slug-hash=PoQLQXe&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoQLQXe\" title=\"CodePen Embed PoQLQXe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here, all I did was update the animation to consider different positions, and we get another loader with the same code structure!<\/p>\n\n\n\n<p>The animation technique I used for the mask layers can also be used with background layers to create a lot of different loaders with a single color. <a href=\"https:\/\/dev.to\/afif\/build-your-css-loader-with-only-one-div-the-dots-3882\" rel=\"noopener\">I wrote a detailed article about this.<\/a> You will see that from the same code structure we can create different variations by simply changing a few values. I am sharing a few examples at the end of the article.<\/p>\n\n\n\n<p>Why not a loader with one dot?<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjpWdoQ\" src=\"\/\/codepen.io\/anon\/embed\/preview\/JjpWdoQ?height=450&amp;theme-id=1&amp;slug-hash=JjpWdoQ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjpWdoQ\" title=\"CodePen Embed JjpWdoQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This one should be fairly easy to grok as I am using the same technique but with a more simple logic:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWyOdgv\" src=\"\/\/codepen.io\/anon\/embed\/preview\/NWyOdgv?height=450&amp;theme-id=1&amp;slug-hash=NWyOdgv&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWyOdgv\" title=\"CodePen Embed NWyOdgv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here is another example of loader where I am also animating <code>radial-gradient<\/code> combined with <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/filter\/\">CSS filters<\/a> and <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mix-blend-mode\/\"><code>mix-blend-mode<\/code><\/a> to create a blobby effect:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWrXvMa\" src=\"\/\/codepen.io\/anon\/embed\/preview\/MWrXvMa?height=450&amp;theme-id=1&amp;slug-hash=MWrXvMa&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWrXvMa\" title=\"CodePen Embed MWrXvMa\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you check the code, you will see that all I am really doing there is animating the <code>background-position<\/code>, exactly like we did with the previous loader, but adding a dash of <code>background-size<\/code> to make it look like the blob gets bigger as it absorbs dots.<\/p>\n\n\n\n<p class=\"is-style-explanation\">If you want to understand the magic behind that blob effect, you can refer to <a href=\"https:\/\/codepen.io\/thebabydino\/project\/full\/ZjwjBe\" rel=\"noopener\">these interactive slides<\/a> (Chrome only) by <a href=\"https:\/\/twitter.com\/anatudor\" rel=\"noopener\">Ana Tudor<\/a> because she covers the topic so well!<\/p>\n\n\n\n<p>Here is another dot loader idea, this time using a different technique:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwrWLVb\" src=\"\/\/codepen.io\/anon\/embed\/VwrWLVb?height=450&amp;theme-id=1&amp;slug-hash=VwrWLVb&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwrWLVb\" title=\"CodePen Embed VwrWLVb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This one is only 10 CSS declarations and a keyframe. The main element and its two pseudo-elements have the same background configuration with one radial gradient. Each one creates one dot, for a total of three. The animation moves the gradient from top to bottom by using different delays for each dot..<\/p>\n\n\n\n<p>Oh, and take note how this demo uses CSS Grid. This allows us to leverage the grid\u2019s default <code>stretch<\/code> alignment so that both pseudo-elements cover the whole area of their parent. No need for sizing! Push the around a little with <code>translate()<\/code> and we\u2019re all set.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-examples\">More examples!<\/h3>\n\n\n<p>Just to drive the point home, I want to leave you with a bunch of additional examples that are really variations of what we\u2019ve looked at. As you view the demos, you\u2019ll see that the approaches we\u2019ve covered here are super flexible and open up tons of design possibilities.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWpKbez\" src=\"\/\/codepen.io\/anon\/embed\/preview\/MWpKbez?height=450&amp;theme-id=1&amp;slug-hash=MWpKbez&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWpKbez\" title=\"CodePen Embed MWpKbez\" 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_VwpWZBr\" src=\"\/\/codepen.io\/anon\/embed\/preview\/VwpWZBr?height=450&amp;theme-id=1&amp;slug-hash=VwpWZBr&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwpWZBr\" title=\"CodePen Embed VwpWZBr\" 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_mdWppmj\" src=\"\/\/codepen.io\/anon\/embed\/preview\/mdWppmj?height=450&amp;theme-id=1&amp;slug-hash=mdWppmj&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdWppmj\" title=\"CodePen Embed mdWppmj\" 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_qBrLrox\" src=\"\/\/codepen.io\/anon\/embed\/preview\/qBrLrox?height=450&amp;theme-id=1&amp;slug-hash=qBrLrox&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBrLrox\" title=\"CodePen Embed qBrLrox\" 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_rNmNqwr\" src=\"\/\/codepen.io\/anon\/embed\/preview\/rNmNqwr?height=450&amp;theme-id=1&amp;slug-hash=rNmNqwr&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNmNqwr\" title=\"CodePen Embed rNmNqwr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"next-up\">Next up\u2026<\/h3>\n\n\n<p>OK, so we covered <a href=\"https:\/\/css-loaders.com\/dots\/\" rel=\"noopener\">dot loaders<\/a> in this article and <a href=\"https:\/\/css-loaders.com\/spinner\/\" rel=\"noopener\">spinners<\/a> in the last one. In the next article of this four-part series, we\u2019ll turn our attention to another common type of loader: <strong>the bars.<\/strong> We\u2019ll take a lot of what we learned so far and see how we can extend them to create yet another single element loader with as little code and as much flexibility as possible.<\/p>\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>Single Element Loaders: The Dots \u2014 <em>you are here<\/em><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/single-element-loaders-the-bars\/\">Single Element Loaders: The Bars<\/a><\/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\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 dots. Dot loaders are all [&hellip;]<\/p>\n","protected":false},"author":281881,"featured_media":366350,"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":"Last week, it was single element spinners. Today, @ChallengesCSS tackles dots loaders with clever masking techniques.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1221,1027,802,1298],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/dots-loader.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":366526,"url":"https:\/\/css-tricks.com\/single-element-loaders-the-bars\/","url_meta":{"origin":366342,"position":0},"title":"Single Element Loaders: The Bars","date":"June 24, 2022","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/loaders-bars.png?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":366342,"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":366342,"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":366342,"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":255512,"url":"https:\/\/css-tricks.com\/introduction-webpack-entry-output-loaders-plugins\/","url_meta":{"origin":366342,"position":4},"title":"Introduction to webpack: Entry, Output, Loaders, and Plugins","date":"June 14, 2017","format":false,"excerpt":"Front-end development has shifted to a modular approach, improving the encapsulation and structure of codebases. Tooling became a critical part of any project, and right now there are a lot of possible choices. Webpack has gained popularity in the last years because of its power and scalability, but some developers\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350223,"url":"https:\/\/css-tricks.com\/how-i-made-a-generator-for-svg-loaders-with-sass-and-smil-options\/","url_meta":{"origin":366342,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366342"}],"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=366342"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366342\/revisions"}],"predecessor-version":[{"id":377543,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366342\/revisions\/377543"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/366350"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=366342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=366342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=366342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}