{"id":366266,"date":"2022-06-10T07:26:06","date_gmt":"2022-06-10T14:26:06","guid":{"rendered":"https:\/\/css-tricks.com\/?p=366266"},"modified":"2023-08-27T17:43:52","modified_gmt":"2023-08-28T00:43:52","slug":"single-element-loaders-the-spinner","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/single-element-loaders-the-spinner\/","title":{"rendered":"Single Element Loaders: The Spinner"},"content":{"rendered":"\n<p>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 <em>lots<\/em> of techniques and approaches to make them \u2014 no need to <a href=\"https:\/\/codepen.io\/collection\/KLDEaD\" rel=\"noopener\">look further than CodePen<\/a> to see just how many. In this article, though, we will see how to make a single element loader writing as little code as possible.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>I have <a href=\"https:\/\/css-loaders.com\/\" rel=\"noopener\">made a collection of more than 500 single div loaders<\/a> and in this four-part series, I am going to share the tricks I used to create many of them. We will cover a huge number of examples, showing how small adjustments can lead to fun variations, and how little code we need to write to make it all happen!<\/p>\n\n\n\n<div class=\"wp-block-group ticss-c35bb282\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><h4 class=\"wp-block-heading\" id=\"h-advanced-git-series\">Single-Element Loaders series:<\/h4>\n\n\n<ol>\n<li>Single Element Loaders: The Spinner \u2014 <em>you are here<\/em><\/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><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<\/ol>\n<\/div><\/div>\n\n\n\n<p>For this first article, we are going to create a one of the more common loader patterns: spinning bars:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNpbMvM\" src=\"\/\/codepen.io\/anon\/embed\/rNpbMvM?height=450&amp;theme-id=1&amp;slug-hash=rNpbMvM&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNpbMvM\" title=\"CodePen Embed rNpbMvM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"heres-the-approach\">Here\u2019s the approach<\/h3>\n\n\n<p>A trivial implementation for this loader is to create one element for each bar wrapped inside a parent element (for nine total elements), then play with <code>opacity<\/code> and <code>transform<\/code> to get the spinning effect.<\/p>\n\n\n\n<p>My implementation, though, requires only one element:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"loader\">&lt;\/div><\/code><\/pre>\n\n\n\n<p>&#8230;and 10 CSS declarations:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader {\n  width: 150px; \/* control the size *\/\n  aspect-ratio: 1;\n  display: grid;\n  mask: conic-gradient(from 22deg, #0003, #000);\n  animation: load 1s steps(8) infinite;\n}\n.loader,\n.loader:before {\n  --_g: linear-gradient(#17177c 0 0) 50%; \/* update the color here *\/\n  background: \n    var(--_g)\/34% 8%  space no-repeat,\n    var(--_g)\/8%  34% no-repeat space;\n}\n.loader:before {\n  content: \"\";\n  transform: rotate(45deg);\n}\n@keyframes load {\n  to { transform: rotate(1turn); }\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"lets-break-that-down\">Let\u2019s break that down<\/h3>\n\n\n<p>At first glance, the code may look strange but you will see that it\u2019s more simple than what you might think. The first step is to define the dimension of the element. In our case, it\u2019s a <code>150px<\/code> square. We can put <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/aspect-ratio\/\"><code>aspect-ratio<\/code><\/a> to use so the element stays square no matter what.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader {\n  width: 150px; \/* control the size *\/\n  aspect-ratio: 1; \/* make height equal to width *\/\n}<\/code><\/pre>\n\n\n\n<p>When building CSS loaders, I always try to have one value for controlling the overall size. In this case, it\u2019s the <code>width<\/code> and all the calculations we cover will refer to that value. This allows me to change a single value to control the loader. It\u2019s always important to be able to easily adjust the size of our loaders without the need to adjust a lot of additional values.<\/p>\n\n\n\n<p>Next, we will use gradients to create the bars. This is the trickiest part! Let\u2019s use <em>one<\/em> gradient to create <em>two<\/em> bars like the below:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">background: linear-gradient(#17177c 0 0) 50%\/34% 8% space no-repeat;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"577\" height=\"340\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651414613507_image.png?resize=577%2C340&#038;ssl=1\" alt=\"Showing a space between two gradient lines for a single element loader.\" class=\"wp-image-366269\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651414613507_image.png?w=577&amp;ssl=1 577w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651414613507_image.png?resize=300%2C177&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Our gradient is defined with one color and two color stops. The result is a solid color with no fading or transitions. The size is equal to <code>34%<\/code> wide and <code>8%<\/code> tall. It\u2019s also placed in the center (<code>50%<\/code>). The trick is the use of the keyword value <code>space<\/code> \u2014 this duplicates the gradient, giving us two total bars.<\/p>\n\n\n\n<p>From <a href=\"https:\/\/www.w3.org\/TR\/css-backgrounds-3\/#valdef-background-repeat-space\" rel=\"noopener\">the specification<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area. The first and last images touch the edges of the area.<\/p>\n<\/blockquote>\n\n\n\n<p>I am using a width equal to <code>34%<\/code> which means we cannot have more than two bars (<code>3*34%<\/code> is greater than <code>100%<\/code>) but with two bars we will have empty spaces (<code>100% - 2 * 34% = 32%<\/code>). That space is placed in the center between the two bars. In other words, we use a width for the gradient that is between <code>33%<\/code> and <code>50%<\/code> to make sure we have at least two bars with a little bit of space between them. The value <code>space<\/code> is what correctly places them for us.<\/p>\n\n\n\n<p>We do the same and make a second similar gradient to get two more bars at the top and bottom, which give us a <code>background<\/code> property value of:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">background: \n linear-gradient(#17177c 0 0) 50%\/34% 8%  space no-repeat,\n linear-gradient(#17177c 0 0) 50%\/8%  34% no-repeat space;<\/code><\/pre>\n\n\n\n<p>We can optimize that using a CSS variable to avoid repetition:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--_g: linear-gradient(#17177c 0 0) 50%; \/* update the color here *\/\nbackground: \n var(--_g)\/34% 8%  space no-repeat,\n var(--_g)\/8%  34% no-repeat space;<\/code><\/pre>\n\n\n\n<p>So, now we have four bars and, thanks to CSS variables, we can write the color value once which makes it easy to update later (like we did with the size of the loader).<\/p>\n\n\n\n<p>To create the remaining bars, let\u2019s tap into the <code>.loader<\/code> element and its <code>::before<\/code> pseudo-element to get four more bars for a grand total of eight in all.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader {\n  width: 150px; \/* control the size *\/\n  aspect-ratio: 1;\n  display: grid;\n}\n.loader,\n.loader::before {\n  --_g: linear-gradient(#17177c 0 0) 50%; \/* update the color here *\/\n  background: \n    var(--_g)\/34% 8%  space no-repeat,\n    var(--_g)\/8%  34% no-repeat space;\n}\n.loader::before {\n  content: \"\";\n  transform: rotate(45deg);\n}<\/code><\/pre>\n\n\n\n<p>Note the use of <code>display: grid<\/code>. This allows us to rely on the grid\u2019s default <code>stretch<\/code> alignment to make the pseudo-element cover the whole area of its parent; thus there\u2019s no need to specify a dimension on it \u2014 another trick that reduces the code and avoid us to deal with a lot of values!<\/p>\n\n\n\n<p>Now let\u2019s rotate the pseudo-element by <code>45deg<\/code> to position the remaining bars. Hover the following demo to see the trick:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWQWQOV\" src=\"\/\/codepen.io\/anon\/embed\/QWQWQOV?height=450&amp;theme-id=1&amp;slug-hash=QWQWQOV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWQWQOV\" title=\"CodePen Embed QWQWQOV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"setting-opacity\">Setting opacity<\/h3>\n\n\n<p>What we\u2019re trying to do is create the impression that there is one bar that leaves a trail of fading bars behind it as it travels a circular path. What we need now is to play with the transparency of our bars to make that trail, which we are going to do with CSS <code>mask<\/code> combined with a conic-gradient as follows:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask: conic-gradient(from 22deg,#0003,#000);<\/code><\/pre>\n\n\n\n<p>To better see the trick, let\u2019s apply this to a full-colored box:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYQYQdZ\" src=\"\/\/codepen.io\/anon\/embed\/LYQYQdZ?height=450&amp;theme-id=1&amp;slug-hash=LYQYQdZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYQYQdZ\" title=\"CodePen Embed LYQYQdZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The transparency of the red color is gradually increasing clockwise. We apply this to our loader and we have the bars with different opacity:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"827\" height=\"278\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651416594508_image.png?resize=827%2C278&#038;ssl=1\" alt=\"Radial gradient plus, spinner bars equals spinner bars with gradients.\" class=\"wp-image-366270\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651416594508_image.png?w=827&amp;ssl=1 827w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651416594508_image.png?resize=300%2C101&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_98F21CD3C1C7899779F98C6C3E6075E37A8E660CF4703968B4D3A7A973FF0FA6_1651416594508_image.png?resize=768%2C258&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>In reality, each bar appears to fade because it\u2019s masked by a gradient and falls between two semi-transparent colors. It\u2019s hardly noticeable when this runs, so it\u2019s sort of like being able to say that all the bars have the same color with a different level of opacity.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-rotation\">The rotation<\/h3>\n\n\n<p>Let\u2019s apply a rotation animation to get our loader. Note, that we need a stepped animation and not a continuous one that\u2019s why I am using <code>steps(8)<\/code>. <code>8<\/code> is nothing but the number of the bars, so that value can be changed depending on how many bars are in use.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader {\n  animation: load 3s steps(8) infinite;\n}\n\n\/* Same as before: *\/\n@keyframes load {\n  to { transform: rotate(1turn) }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_Yzezemr\" src=\"\/\/codepen.io\/anon\/embed\/preview\/Yzezemr?height=450&amp;theme-id=1&amp;slug-hash=Yzezemr&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed Yzezemr\" title=\"CodePen Embed Yzezemr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That\u2019s it! We have our loader with only one element and a few lines of CSS. We can easily control its size and color by adjusting one value.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYRYWOq\" src=\"\/\/codepen.io\/anon\/embed\/preview\/zYRYWOq?height=450&amp;theme-id=1&amp;slug-hash=zYRYWOq&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYRYWOq\" title=\"CodePen Embed zYRYWOq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Since we only used the <code>::before<\/code> pseudo-element, we can add four more bars by using <code>::after<\/code> to end with 12 bars in total and almost the same code:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWQWmWP\" src=\"\/\/codepen.io\/anon\/embed\/preview\/QWQWmWP?height=450&amp;theme-id=1&amp;slug-hash=QWQWmWP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWQWmWP\" title=\"CodePen Embed QWQWmWP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We update the rotation of our pseudo-elements to consider <code>30deg<\/code> and <code>60deg<\/code> instead of <code>45deg<\/code> while using an twelve-step animation, rather than eight. I also decreased the height to <code>5%<\/code> instead of <code>8%<\/code> to make the bars a little thinner.<\/p>\n\n\n\n<p>Notice, too, that we have <code>grid-area: 1\/1<\/code> on the pseudo-elements. This allows us to place them in the same area as one another, stacked on top of each other.<\/p>\n\n\n\n<p>Guess what? We can reach for the same loader using another implementation:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJQzbzr\" src=\"\/\/codepen.io\/anon\/embed\/preview\/OJQzbzr?height=450&amp;theme-id=1&amp;slug-hash=OJQzbzr&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJQzbzr\" title=\"CodePen Embed OJQzbzr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Can you figure out the logic behind the code? Here is a hint: the opacity is no longer handled with a CSS <code>mask<\/code> but inside the gradient and is also using the <code>opacity<\/code> property.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"why-not-dots-instead\">Why not dots instead?<\/h3>\n\n\n<p>We can totally do that:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwQyzmY\" src=\"\/\/codepen.io\/anon\/embed\/RwQyzmY?height=450&amp;theme-id=1&amp;slug-hash=RwQyzmY&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwQyzmY\" title=\"CodePen Embed RwQyzmY\" 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 we\u2019re now working with a radial gradient instead of a linear one. Otherwise, the concept is exactly the same where the mask creates the impression of opacity, but we made the shapes as circles instead of lines.<\/p>\n\n\n\n<p>Below is a figure to illustrate the new gradient configuration:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"693\" height=\"293\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_B3DCAAF1BD4EF695C8E8E4733CA6E3BD909E614220F68B297B62285B12C652E5_1654551247592_image.png?resize=693%2C293&#038;ssl=1\" alt=\"Showing placement of dots in the single-element loader.\" class=\"wp-image-366271\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_B3DCAAF1BD4EF695C8E8E4733CA6E3BD909E614220F68B297B62285B12C652E5_1654551247592_image.png?w=693&amp;ssl=1 693w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_B3DCAAF1BD4EF695C8E8E4733CA6E3BD909E614220F68B297B62285B12C652E5_1654551247592_image.png?resize=300%2C127&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>If you&#8217;re using Safari, note that the demo may be buggy. That&#8217;s because Safari currently lacks support for the <code>at<\/code> syntax in radial gradients. But we can reconfigure the gradient a bit to overcome that:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"6,12\"><code markup=\"tt\">.loader,\n.loader:before,\n.loader:after {\n  background:\n    radial-gradient(\n      circle closest-side,\n      currentColor 90%,\n      #0000 98%\n    ) \n    50% -150%\/20% 80% repeat-y,\n    radial-gradient(\n      circle closest-side,\n      currentColor 90%,\n      #0000 98%\n    ) \n    -150% 50%\/80% 20% repeat-x;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYVLKOv\/555436ef8e29838fff4872caa1dcf8d9\" src=\"\/\/codepen.io\/anon\/embed\/preview\/eYVLKOv\/555436ef8e29838fff4872caa1dcf8d9?height=450&amp;theme-id=1&amp;slug-hash=eYVLKOv\/555436ef8e29838fff4872caa1dcf8d9&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYVLKOv\/555436ef8e29838fff4872caa1dcf8d9\" title=\"CodePen Embed eYVLKOv\/555436ef8e29838fff4872caa1dcf8d9\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-loader-examples\">More loader examples<\/h3>\n\n\n<p>Here is another idea for a spinner loader similar to the previous one.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoJyaNy\" src=\"\/\/codepen.io\/anon\/embed\/PoJyaNy?height=450&amp;theme-id=1&amp;slug-hash=PoJyaNy&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoJyaNy\" title=\"CodePen Embed PoJyaNy\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>For this one, I am only relying on <code>background<\/code> and <code>mask<\/code> to create the shape (no pseudo-elements needed). I am also defining the configuration with CSS variables to be able to create a lot of variations from the same code \u2014 another example of just the powers of CSS variables. <a href=\"https:\/\/www.freecodecamp.org\/news\/how-to-create-a-css-only-loader\/\" rel=\"noopener\">I wrote another article about this technique<\/a> if you want to more details.<\/p>\n\n\n\n<p class=\"is-style-explanation\">Note that some browsers still rely on a <code>-webkit-<\/code> prefix for <code>mask-composite<\/code> with its own set of values, and will not display the spinner in the demo. <a href=\"https:\/\/codepen.io\/t_afif\/pen\/wvyYLpJ\" rel=\"noopener\">Here is a way to do it<\/a> without <code>mast-composite<\/code> for more browser support.<\/p>\n\n\n\n<p>I have another one for you:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYPqMgq\" src=\"\/\/codepen.io\/anon\/embed\/preview\/zYPqMgq?height=450&amp;theme-id=1&amp;slug-hash=zYPqMgq&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYPqMgq\" title=\"CodePen Embed zYPqMgq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>For this one, I am using a <code>background-color<\/code> to control the color, and use <code>mask<\/code> and <code>mask-composite<\/code> to create the final shape:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_B3DCAAF1BD4EF695C8E8E4733CA6E3BD909E614220F68B297B62285B12C652E5_1653920041342_image.png?resize=858%2C312&#038;ssl=1\" alt=\"Different steps for applying a master to a element in the shape of a circle.\" class=\"wp-image-366272\" width=\"858\" height=\"312\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_B3DCAAF1BD4EF695C8E8E4733CA6E3BD909E614220F68B297B62285B12C652E5_1653920041342_image.png?w=858&amp;ssl=1 858w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_B3DCAAF1BD4EF695C8E8E4733CA6E3BD909E614220F68B297B62285B12C652E5_1653920041342_image.png?resize=300%2C109&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_B3DCAAF1BD4EF695C8E8E4733CA6E3BD909E614220F68B297B62285B12C652E5_1653920041342_image.png?resize=768%2C279&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Before we end, here are some more spinning loaders I made a while back. I am relying on different techniques but still using gradients, masks, pseudo-element, etc. It could be a good exercise to figure out the logic of each one and learn new tricks at the same time. This said, if you have any question about them, the comment section is down below.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poegNEO\" src=\"\/\/codepen.io\/anon\/embed\/preview\/poegNEO?height=450&amp;theme-id=1&amp;slug-hash=poegNEO&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poegNEO\" title=\"CodePen Embed poegNEO\" 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_yLMXBRL\" src=\"\/\/codepen.io\/anon\/embed\/preview\/yLMXBRL?height=450&amp;theme-id=1&amp;slug-hash=yLMXBRL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLMXBRL\" title=\"CodePen Embed yLMXBRL\" 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_ZEevvXW\" src=\"\/\/codepen.io\/anon\/embed\/preview\/ZEevvXW?height=450&amp;theme-id=1&amp;slug-hash=ZEevvXW&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEevvXW\" title=\"CodePen Embed ZEevvXW\" 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>See, there\u2019s so much we can do in CSS with nothing but a single div, a couple of gradients, pseudo-elements, variables. It seems like we created a whole bunch of different spinning loaders, but they\u2019re all basically the same thing with slight modifications.<\/p>\n\n\n\n<p>This is only the beginning. In this series, we will be looking at more ideas and advanced concepts for creating <a href=\"https:\/\/css-loaders.com\/\" rel=\"noopener\">CSS loaders<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group ticss-c35bb282\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><h4 class=\"wp-block-heading\" id=\"h-advanced-git-series\">Single-Element Loaders series:<\/h4>\n\n\n<ol>\n<li>Single Element Loaders: The Spinner \u2014 <em>you are here<\/em><\/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><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<\/ol>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>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 see how to make a [&hellip;]<\/p>\n","protected":false},"author":281881,"featured_media":366275,"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":"Didya know that @ChallengesCSS has more than 500 examples of single div loaders? Well, he's kicking off a 4-part series on his approach starting with... spinnerrrrs.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[612,1027,802,1298,1154],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/loaders-spinners.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":366526,"url":"https:\/\/css-tricks.com\/single-element-loaders-the-bars\/","url_meta":{"origin":366266,"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":366342,"url":"https:\/\/css-tricks.com\/single-element-loaders-the-dots\/","url_meta":{"origin":366266,"position":1},"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":366544,"url":"https:\/\/css-tricks.com\/single-element-loaders-going-3d\/","url_meta":{"origin":366266,"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":366266,"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":366266,"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":366266,"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\/366266"}],"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=366266"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366266\/revisions"}],"predecessor-version":[{"id":377535,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366266\/revisions\/377535"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/366275"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=366266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=366266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=366266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}