{"id":95,"date":"2026-03-27T13:48:46","date_gmt":"2026-03-27T13:48:46","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/c_menhart\/?p=95"},"modified":"2026-03-27T13:48:46","modified_gmt":"2026-03-27T13:48:46","slug":"3-27-26","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/c_menhart\/2026\/03\/27\/3-27-26\/","title":{"rendered":"3\/27\/26"},"content":{"rendered":"\n

i tried to make a spinner <\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <title>Symbol Spinner<\/title>\n  <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n  <div class=\"spinner-wrapper\">\n    <div class=\"spinner-ring\">\n      <div class=\"spinner-item\"><img src=\"Borumaki_Gaiden.webp\"><\/div>\n      <div class=\"spinner-item\"><img src=\"BorumakiShiki.webp\"><\/div>\n      <div class=\"spinner-item\"><\/div><img src=\"Code_Gaiden.webp\"><\/div>\n      <div class=\"spinner-item\"><\/div><img src=\"Fizz.webp\"><\/div>\n      <div class=\"spinner-item\"><\/div><img src=\"Frost.webp\"><\/div>\n      <div class=\"spinner-item\"><\/div><img src=\"Inferno.webp\"><\/div>\n      <div class=\"spinner-item\"><\/div><img src=\"Ink.webp\"><\/div>\n      <div class=\"spinner-item\"><\/div><img src=\"Magma.webp\"><\/div>\n      <div class=\"spinner-item\"><\/div><img src=\"Menza.webp\"><\/div>\n      <div class=\"spinner-item\"><\/div><img src=\"Octo-Ink.webp\"><\/div>\n      <div class=\"spinner-item\"><\/div><img src=\"ShiverRagnar.webp\"><\/div>\n      <div class=\"spinner-item\"><\/div><img src=\"SurgeIcon.webp\"><\/div>\n    <\/div>\n\n    <div class=\"spinner-center\"><\/div>\n  <\/div>\n  <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
was my html <\/p>\n\n\n\n
\n    body {\n      margin: 0;\n      height: 100vh;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #050510;\n      font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    }\n\n    .spinner-wrapper {\n      position: relative;\n      width: 300px;\n      height: 300px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n    }\n\n    .spinner-ring {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      animation: spin 8s linear infinite;\n      top: 45px;\n    }\n\n    .spinner-item {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 70px;\n      height: 70px;\n      transform-origin: 0 -120px;\n    }\n\n    .spinner-item img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));\n      transform: rotate(calc(-1 * var(--angle)));\n    }\n\n    .spinner-item:nth-child(1)  { --angle: 0deg;   transform: rotate(0deg); }\n    .spinner-item:nth-child(2)  { --angle: 30deg;  transform: rotate(30deg); }\n    .spinner-item:nth-child(3)  { --angle: 60deg;  transform: rotate(60deg); }\n    .spinner-item:nth-child(4)  { --angle: 90deg;  transform: rotate(90deg); }\n    .spinner-item:nth-child(5)  { --angle: 120deg; transform: rotate(120deg); }\n    .spinner-item:nth-child(6)  { --angle: 150deg; transform: rotate(150deg); }\n    .spinner-item:nth-child(7)  { --angle: 180deg; transform: rotate(180deg); }\n    .spinner-item:nth-child(8)  { --angle: 210deg; transform: rotate(210deg); }\n    .spinner-item:nth-child(9)  { --angle: 240deg; transform: rotate(240deg); }\n    .spinner-item:nth-child(10) { --angle: 270deg; transform: rotate(270deg); }\n    .spinner-item:nth-child(11) { --angle: 300deg; transform: rotate(300deg); }\n    .spinner-item:nth-child(12) { --angle: 330deg; transform: rotate(330deg); }\n\n.spinner-center {\n  position: absolute;\n  width: 140px;\n  height: 140px;\n  border-radius: 50%;\n  cursor: pointer;\n  top:0;\n  background: radial-gradient(circle,\n    rgba(180, 0, 255, 1) 0%,\n    rgba(110, 10, 180, 1) 40%,\n    rgba(40, 0, 80, 1) 70%,\n    rgba(10, 0, 30, 1) 100%\n  );\n\n\n\nbox-shadow{\n    display: flex;\n}\n    \n\n  animation: pulse 3s ease-in-out infinite;\n  transition: transform 0.2s ease;\n}\n\n\n.glow{\n    box-shadow:\n    0 0 25px rgba(180, 0, 255, 0.8),\n    0 0 60px rgba(150, 0, 255, 0.6),\n    0 0 120px rgba(120, 0, 255, 0.4),\n    inset 0 0 40px rgba(255, 255, 255, 0.15),\n    inset 0 0 80px rgba(180, 0, 255, 0.25);\n\n    transition: ease all 1s;\n}<\/code><\/pre>\n\n\n\n
was my css <\/p>\n\n\n\n
  document.addEventListener(\"DOMContentLoaded\", () => {\n    const center = document.querySelector(\".spinner-center\");\n\n    center.addEventListener(\"click\", () => {\n      center.classList.remove(\"glow\");\n      void center.offsetWidth; \n      center.classList.add(\"glow\");\n    });\n\n\n});\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const center = document.querySelector(\".spinner-center\");\n\n  center.addEventListener(\"click\", () => {\n    center.classList.remove(\"spin\");\n    void center.offsetWidth; \/\/ restart animation\n    center.classList.add(\"spin\");\n  });\n});\n<\/code><\/pre>\n\n\n\n
was my js <\/p>\n","protected":false},"excerpt":{"rendered":"
i tried to make a spinner was my html was my css was my js<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","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":"","theme-transparent-header-meta":"","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":"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":"","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-4)","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-4)","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-4)","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":[1],"tags":[],"class_list":["post-95","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/95","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/comments?post=95"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/95\/revisions"}],"predecessor-version":[{"id":96,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/95\/revisions\/96"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/media?parent=95"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/categories?post=95"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/tags?post=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}