{"id":198,"date":"2018-01-26T15:05:00","date_gmt":"2018-01-26T13:05:00","guid":{"rendered":"https:\/\/celilsemi.erkiner.com\/blog\/?p=198"},"modified":"2020-05-26T15:38:33","modified_gmt":"2020-05-26T13:38:33","slug":"single-class-pure-css-loading-spinner","status":"publish","type":"post","link":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/","title":{"rendered":"Single Class Pure CSS Loading Spinner"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Loading spinners are small animations used to indicate that something is loading and that the user needs to wait.  When there is a spinner animation, it indicates that the application has understood the instruction and is in the process of completing the desired action.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the web application context, there are many operations that require spinners feedback for users. This is because the internet applications go back and forth between the web server and the browser for the desired features. All these background internet connections should be made visible to users. &nbsp;The user can then know that their request is being processed and that they just need to wait a bit for the program to be launched and operational.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On the Internet, loading spinners have always been used in sites and applications for the same purpose as their desktop counterparts. Years ago, spinners were primarily in .gif image format. But since images tend to consume a lot of bandwidth and often slow down the loading speed of websites, web developers have moved on to a more efficient solution: pure CSS loading spinners.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Simplest Loading Spinner<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There is no shortage of ready-to-use CSS-based loading spinners. Yet, it is still fun to derive a spinner from scratch, particular if the constraint is to use only one class and no real DOM elements.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@keyframes rotating {\n    100% {\n        transform: translate(-50%, -50%) rotate(360deg);\n    }\n}\n\n.show-spinner:after {\n    content: ' ';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border-radius: 50%;\n    width: 32px;\n    height: 32px;\n    border: 6px solid rgba(0, 0, 0, 0.1);\n    border-top: 6px solid  rgba(0, 0, 0, 0.5);\n    animation: rotating 1.2s infinite linear;\n}<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Just add this one single css class to show a centered loading spinner animation.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;body class=&quot;show-spinner&quot;&gt;&lt;\/body&gt;<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Happy spinning!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Loading spinners are small animations used to indicate that something is loading and that the user needs to wait. When there is a spinner animation, it indicates that the application has understood the instruction and is in the process of completing the desired action. In the web application context, there are many operations that require [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[40,34,2],"class_list":["post-198","post","type-post","status-publish","format-standard","hentry","category-front-end","tag-animation","tag-css","tag-html"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"Loading spinners are small animations used to indicate that something is loading and that the user needs to wait. When there is a spinner animation, it indicates that the application has understood the instruction and is in the process of completing the desired action. In the web application context, there are many operations that require\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Celilsemi Sam Erkiner\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Celilsemi Sam Erkiner - Blog\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Single Class Pure CSS Loading Spinner\" \/>\n\t\t<meta property=\"og:description\" content=\"Loading spinners are small animations used to indicate that something is loading and that the user needs to wait. When there is a spinner animation, it indicates that the application has understood the instruction and is in the process of completing the desired action. In the web application context, there are many operations that require\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2018-01-26T13:05:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-05-26T13:38:33+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Single Class Pure CSS Loading Spinner\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Loading spinners are small animations used to indicate that something is loading and that the user needs to wait. When there is a spinner animation, it indicates that the application has understood the instruction and is in the process of completing the desired action. In the web application context, there are many operations that require\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/#blogposting\",\"name\":\"Single Class Pure CSS Loading Spinner\",\"headline\":\"Single Class Pure CSS Loading Spinner\",\"author\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/appicon.png\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#articleImage\",\"width\":1024,\"height\":1024,\"caption\":\"Icon of Celilsemi Sam Erkiner\"},\"datePublished\":\"2018-01-26T15:05:00+02:00\",\"dateModified\":\"2020-05-26T15:38:33+02:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/#webpage\"},\"articleSection\":\"Front End Engineering, animation, css, html\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"name\":\"Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"position\":2,\"name\":\"Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"name\":\"Software Engineering\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"position\":3,\"name\":\"Software Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"name\":\"Front End Engineering\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"name\":\"Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"position\":4,\"name\":\"Front End Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/#listItem\",\"name\":\"Single Class Pure CSS Loading Spinner\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"name\":\"Software Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/#listItem\",\"position\":5,\"name\":\"Single Class Pure CSS Loading Spinner\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"name\":\"Front End Engineering\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\",\"name\":\"Celilsemi Sam Erkiner\",\"description\":\"Blog\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/appicon.png\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/#organizationLogo\",\"width\":1024,\"height\":1024,\"caption\":\"Icon of Celilsemi Sam Erkiner\"},\"image\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/#organizationLogo\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/\",\"name\":\"Celilsemi Sam Erkiner\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/#authorImage\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/0c0a56fe50d80138ca959da76bd58688.jpg?ver=1793310866\",\"width\":96,\"height\":96,\"caption\":\"Celilsemi Sam Erkiner\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/#webpage\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/\",\"name\":\"Single Class Pure CSS Loading Spinner\",\"description\":\"Loading spinners are small animations used to indicate that something is loading and that the user needs to wait. When there is a spinner animation, it indicates that the application has understood the instruction and is in the process of completing the desired action. In the web application context, there are many operations that require\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/single-class-pure-css-loading-spinner\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"datePublished\":\"2018-01-26T15:05:00+02:00\",\"dateModified\":\"2020-05-26T15:38:33+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"name\":\"Celilsemi Sam Erkiner\",\"description\":\"Blog\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Single Class Pure CSS Loading Spinner","description":"Loading spinners are small animations used to indicate that something is loading and that the user needs to wait. When there is a spinner animation, it indicates that the application has understood the instruction and is in the process of completing the desired action. In the web application context, there are many operations that require","canonical_url":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/#blogposting","name":"Single Class Pure CSS Loading Spinner","headline":"Single Class Pure CSS Loading Spinner","author":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"publisher":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#articleImage","width":1024,"height":1024,"caption":"Icon of Celilsemi Sam Erkiner"},"datePublished":"2018-01-26T15:05:00+02:00","dateModified":"2020-05-26T15:38:33+02:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/#webpage"},"isPartOf":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/#webpage"},"articleSection":"Front End Engineering, animation, css, html"},{"@type":"BreadcrumbList","@id":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#listItem","position":1,"name":"Home","item":"https:\/\/celilsemi.erkiner.com\/blog\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","name":"Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","position":2,"name":"Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","name":"Software Engineering"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","position":3,"name":"Software Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","name":"Front End Engineering"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","name":"Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","position":4,"name":"Front End Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/#listItem","name":"Single Class Pure CSS Loading Spinner"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","name":"Software Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/#listItem","position":5,"name":"Single Class Pure CSS Loading Spinner","previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","name":"Front End Engineering"}}]},{"@type":"Organization","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization","name":"Celilsemi Sam Erkiner","description":"Blog","url":"https:\/\/celilsemi.erkiner.com\/blog\/","logo":{"@type":"ImageObject","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","@id":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/#organizationLogo","width":1024,"height":1024,"caption":"Icon of Celilsemi Sam Erkiner"},"image":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/#organizationLogo"}},{"@type":"Person","@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author","url":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/","name":"Celilsemi Sam Erkiner","image":{"@type":"ImageObject","@id":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/#authorImage","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/litespeed\/avatar\/0c0a56fe50d80138ca959da76bd58688.jpg?ver=1793310866","width":96,"height":96,"caption":"Celilsemi Sam Erkiner"}},{"@type":"WebPage","@id":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/#webpage","url":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/","name":"Single Class Pure CSS Loading Spinner","description":"Loading spinners are small animations used to indicate that something is loading and that the user needs to wait. When there is a spinner animation, it indicates that the application has understood the instruction and is in the process of completing the desired action. In the web application context, there are many operations that require","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/#breadcrumblist"},"author":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"creator":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"datePublished":"2018-01-26T15:05:00+02:00","dateModified":"2020-05-26T15:38:33+02:00"},{"@type":"WebSite","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#website","url":"https:\/\/celilsemi.erkiner.com\/blog\/","name":"Celilsemi Sam Erkiner","description":"Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Celilsemi Sam Erkiner - Blog","og:type":"article","og:title":"Single Class Pure CSS Loading Spinner","og:description":"Loading spinners are small animations used to indicate that something is loading and that the user needs to wait. When there is a spinner animation, it indicates that the application has understood the instruction and is in the process of completing the desired action. In the web application context, there are many operations that require","og:url":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/","og:image":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","og:image:secure_url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","article:published_time":"2018-01-26T13:05:00+00:00","article:modified_time":"2020-05-26T13:38:33+00:00","twitter:card":"summary_large_image","twitter:title":"Single Class Pure CSS Loading Spinner","twitter:description":"Loading spinners are small animations used to indicate that something is loading and that the user needs to wait. When there is a spinner animation, it indicates that the application has understood the instruction and is in the process of completing the desired action. In the web application context, there are many operations that require","twitter:image":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png"},"aioseo_meta_data":{"post_id":"198","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2023-11-14 19:48:17","updated":"2025-07-29 07:04:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/\" title=\"Engineering\">Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/\" title=\"Software Engineering\">Software Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/\" title=\"Front End Engineering\">Front End Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tSingle Class Pure CSS Loading Spinner\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/celilsemi.erkiner.com\/blog\/"},{"label":"Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/"},{"label":"Software Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/"},{"label":"Front End Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/"},{"label":"Single Class Pure CSS Loading Spinner","link":"https:\/\/celilsemi.erkiner.com\/blog\/single-class-pure-css-loading-spinner\/"}],"_links":{"self":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/comments?post=198"}],"version-history":[{"count":1,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/198\/revisions"}],"predecessor-version":[{"id":199,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/198\/revisions\/199"}],"wp:attachment":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/media?parent=198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/categories?post=198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/tags?post=198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}