{"id":98,"date":"2026-04-10T14:12:34","date_gmt":"2026-04-10T14:12:34","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/c_menhart\/?p=98"},"modified":"2026-04-10T14:12:34","modified_gmt":"2026-04-10T14:12:34","slug":"4-10","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/c_menhart\/2026\/04\/10\/4-10\/","title":{"rendered":"4\/10"},"content":{"rendered":"\n

i added more and found more things to add<\/p>\n\n\n\n

.spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 150px;\n  \n  \/* REMOVE default animation *\/\n}\n\n.spinner-item {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 70px;\n  height: 70px;\n  transform-origin: 0 -240px;\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\/* Your angles stay the same *\/\n.spinner-item:nth-child(1) { --angle: 0.0deg;   transform: rotate(0.0deg); }\n.spinner-item:nth-child(2) { --angle: 15.0deg;   transform: rotate(15.0deg); }\n.spinner-item:nth-child(3) { --angle: 30.0deg;   transform: rotate(30.0deg); }\n.spinner-item:nth-child(4) { --angle: 45.0deg;   transform: rotate(45.0deg); }\n.spinner-item:nth-child(5) { --angle: 60.0deg;   transform: rotate(60.0deg); }\n.spinner-item:nth-child(6) { --angle: 75.0deg;   transform: rotate(75.0deg); }\n.spinner-item:nth-child(7) { --angle: 90.0deg;   transform: rotate(90.0deg); }\n.spinner-item:nth-child(8) { --angle: 105.0deg;   transform: rotate(105.0deg); }\n.spinner-item:nth-child(9) { --angle: 120.0deg;   transform: rotate(120.0deg); }\n.spinner-item:nth-child(10) { --angle: 135.0deg;   transform: rotate(135.0deg); }\n.spinner-item:nth-child(11) { --angle: 150.0deg;   transform: rotate(150.0deg); }\n.spinner-item:nth-child(12) { --angle: 165.0deg;   transform: rotate(165.0deg); }\n.spinner-item:nth-child(13) { --angle: 180.0deg;   transform: rotate(180.0deg); }\n.spinner-item:nth-child(14) { --angle: 195.0deg;   transform: rotate(195.0deg); }\n.spinner-item:nth-child(15) { --angle: 210.0deg;   transform: rotate(210.0deg); }\n.spinner-item:nth-child(16) { --angle: 225.0deg;   transform: rotate(225.0deg); }\n.spinner-item:nth-child(17) { --angle: 240.0deg;   transform: rotate(240.0deg); }\n.spinner-item:nth-child(18) { --angle: 255.0deg;   transform: rotate(255.0deg); }\n.spinner-item:nth-child(19) { --angle: 270.0deg;   transform: rotate(270.0deg); }\n.spinner-item:nth-child(20) { --angle: 285.0deg;   transform: rotate(285.0deg); }\n.spinner-item:nth-child(21) { --angle: 300.0deg;   transform: rotate(300.0deg); }\n.spinner-item:nth-child(22) { --angle: 315.0deg;   transform: rotate(315.0deg); }\n.spinner-item:nth-child(23) { --angle: 330.0deg;   transform: rotate(330.0deg); }\n.spinner-item:nth-child(24) { --angle: 345.0deg;   transform: rotate(345.0deg); }\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n\n\/* Center button *\/\n.spinner-center {\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.spinner-center:active {\n  transform: scale(0.95);\n}\n\n\/* Class added when clicked *\/\n.spin-on-click {\n  animation: spin 2s linear infinite !important;\n}\n<\/code><\/pre>\n\n\n\n
was my css<\/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\"><img src=\"Code_Gaiden.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Fizz.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Frost.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Inferno.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Ink.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Magma.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Menza.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Octo-Ink.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"ShiverRagnar.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"SurgeIcon.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"RELL.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Vanhelsing.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Jayramaki.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"RaionRengoku.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Forged_Rengoku.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Kamaki-Akuma.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Shindai.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Sharingan_Triple.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Menza.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"Octo-Ink.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"ShiverRagnar.webp\"><\/div>\n    <div class=\"spinner-item\"><img src=\"SurgeIcon.webp\"><\/div>\n  <\/div>\n\n  <div class=\"spinner-center\"><\/div>\n<\/div>\n\n\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","protected":false},"excerpt":{"rendered":"
i added more and found more things to add was my css was my html<\/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-98","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/98","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=98"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/98\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/98\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/media?parent=98"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/categories?post=98"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/tags?post=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}