From 3c2d0b59039311d076fb2c3d253b2dd02b14a729 Mon Sep 17 00:00:00 2001
From: William Tsao <williamtsao1202@gmail.com>
Date: Thu, 12 Nov 2020 11:17:57 -0500
Subject: [PATCH] replace ::after with div.circle

---
 paper-spinner-lite.html   |  8 ++++++--
 paper-spinner-styles.html | 16 ++++++++--------
 paper-spinner.html        | 32 ++++++++++++++++++++++++--------
 3 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/paper-spinner-lite.html b/paper-spinner-lite.html
index 79547b6..0c2069b 100644
--- a/paper-spinner-lite.html
+++ b/paper-spinner-lite.html
@@ -56,8 +56,12 @@
         on-animationend="__reset"
         on-webkit-animation-end="__reset">
       <div class="spinner-layer">
-        <div class="circle-clipper left"></div>
-        <div class="circle-clipper right"></div>
+        <div class="circle-clipper left">
+          <div class="circle"></div>
+        </div>
+        <div class="circle-clipper right">
+          <div class="circle"></div>
+        </div>
       </div>
     </div>
   </template>
diff --git a/paper-spinner-styles.html b/paper-spinner-styles.html
index d08748f..fef3e70 100644
--- a/paper-spinner-styles.html
+++ b/paper-spinner-styles.html
@@ -240,14 +240,14 @@
        * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).
        */
       .spinner-layer::after {
+        content: '';
         left: 45%;
         width: 10%;
         border-top-style: solid;
       }
 
       .spinner-layer::after,
-      .circle-clipper::after {
-        content: '';
+      .circle-clipper .circle {
         box-sizing: border-box;
         position: absolute;
         top: 0;
@@ -255,21 +255,21 @@
         border-radius: 50%;
       }
 
-      .circle-clipper::after {
+      .circle-clipper .circle {
         bottom: 0;
         width: 200%;
         border-style: solid;
         border-bottom-color: transparent !important;
       }
 
-      .circle-clipper.left::after {
+      .circle-clipper.left .circle {
         left: 0;
         border-right-color: transparent !important;
         -webkit-transform: rotate(129deg);
         transform: rotate(129deg);
       }
 
-      .circle-clipper.right::after {
+      .circle-clipper.right .circle {
         left: -100%;
         border-left-color: transparent !important;
         -webkit-transform: rotate(-129deg);
@@ -277,7 +277,7 @@
       }
 
       .active .gap-patch::after,
-      .active .circle-clipper::after {
+      .active .circle-clipper .circle {
         -webkit-animation-duration: var(--paper-spinner-expand-contract-duration);
         -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
         -webkit-animation-iteration-count: infinite;
@@ -286,12 +286,12 @@
         animation-iteration-count: infinite;
       }
 
-      .active .circle-clipper.left::after {
+      .active .circle-clipper.left .circle {
         -webkit-animation-name: left-spin;
         animation-name: left-spin;
       }
 
-      .active .circle-clipper.right::after {
+      .active .circle-clipper.right .circle {
         -webkit-animation-name: right-spin;
         animation-name: right-spin;
       }
diff --git a/paper-spinner.html b/paper-spinner.html
index 51e4910..fd6b4b3 100644
--- a/paper-spinner.html
+++ b/paper-spinner.html
@@ -61,23 +61,39 @@
         on-animationend="__reset"
         on-webkit-animation-end="__reset">
       <div class="spinner-layer layer-1">
-        <div class="circle-clipper left"></div>
-        <div class="circle-clipper right"></div>
+        <div class="circle-clipper left">
+          <div class="circle"></div>
+        </div>
+        <div class="circle-clipper right">
+          <div class="circle"></div>
+        </div>
       </div>
 
       <div class="spinner-layer layer-2">
-        <div class="circle-clipper left"></div>
-        <div class="circle-clipper right"></div>
+        <div class="circle-clipper left">
+          <div class="circle"></div>
+        </div>
+        <div class="circle-clipper right">
+          <div class="circle"></div>
+        </div>
       </div>
 
       <div class="spinner-layer layer-3">
-        <div class="circle-clipper left"></div>
-        <div class="circle-clipper right"></div>
+        <div class="circle-clipper left">
+          <div class="circle"></div>
+        </div>
+        <div class="circle-clipper right">
+          <div class="circle"></div>
+        </div>
       </div>
 
       <div class="spinner-layer layer-4">
-        <div class="circle-clipper left"></div>
-        <div class="circle-clipper right"></div>
+        <div class="circle-clipper left">
+          <div class="circle"></div>
+        </div>
+        <div class="circle-clipper right">
+          <div class="circle"></div>
+        </div>
       </div>
     </div>
   </template>