Updated Brightcove Loading Animation and Icon

brightcove · Apr 7, 2022 · ad56a32 · ad56a32
1 parent 5f9629d
commit ad56a32
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/...in/content/jcr_root/apps/brightcove/components/tools/brightcoveadmin/brightcoveadmin.html b/...in/content/jcr_root/apps/brightcove/components/tools/brightcoveadmin/brightcoveadmin.html
@@ -471,8 +471,32 @@
             <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
             <!--<%--LOADING MODAL ADDITION--%>-->
             <div class="loading">
+                <style>
+                    .loader img {
+                        /* Start the shake animation and make the animation last for 0.5 seconds */
+                        animation: shake 0.5s;
+
+                        /* When the animation is finished, start again */
+                        animation-iteration-count: infinite;
+                      }
+
+                      @keyframes shake {
+                        0% { transform: translate(1px, 1px) rotate(0deg); }
+                        10% { transform: translate(-1px, -2px) rotate(-1deg); }
+                        20% { transform: translate(-3px, 0px) rotate(1deg); }
+                        30% { transform: translate(3px, 2px) rotate(0deg); }
+                        40% { transform: translate(1px, -1px) rotate(1deg); }
+                        50% { transform: translate(-1px, 2px) rotate(-1deg); }
+                        60% { transform: translate(-3px, 1px) rotate(0deg); }
+                        70% { transform: translate(3px, 1px) rotate(-1deg); }
+                        80% { transform: translate(-1px, -1px) rotate(1deg); }
+                        90% { transform: translate(1px, 2px) rotate(0deg); }
+                        100% { transform: translate(1px, -2px) rotate(-1deg); }
+                      }
+                </style>
                 <div class="loader">
-                    <svg id="brightcode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 370.83 367.28">
+                    <img src="/etc/designs/cs/brightcove/shared/img/brightcove-loading.png" alt="Brightcove" style="width: 75px" />
+                    <!--<svg id="brightcode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 370.83 367.28">
                         <path class="cls-1 shape-1" d="M53.36,161c-2.57-.94-3.73-3.19-5-5.36C37.65,136.84,27,118,16.15,99.33c-5-8.61-5-16.8.11-25.41C27.07,55.8,37.57,37.49,48.21,19.26c5.33-9.14,11.08-9.11,16.42.16,10.38,18,20.63,36.09,31.1,54,3.3,5.65,5.2,11.48,4.49,18l-3.9,9.17,0,0a34.07,34.07,0,0,0-2,2.79c-10.07,17.22-20.2,34.41-30.1,51.72C61.65,159.64,58.58,162.07,53.36,161Z" />
                         <path class="cls-1 shape-2" d="M102,106.67a.78.78,0,0,0,.39-.82c4-3.17,7.91-3.1,11.88,0a.79.79,0,0,0,.4.84c3,5.46,5.81,11.08,9.55,16.11a32.9,32.9,0,0,0,1.39,3.14q11.57,20.29,23.2,40.55c4.47,7.75,4.55,15.37,0,23.13-11.25,19.19-22.36,38.47-33.66,57.63-3.95,6.69-10.34,6.54-14.34-.22-4.56-7.71-8.87-15.58-13.45-23.29C81,213,75.59,201.82,68.44,191.61v-.08a6.82,6.82,0,0,0-.5-1.89c-5.39-8.76-4.56-17.27.72-25.77,3.5-5.63,6.81-11.38,10.07-17.16,7.15-12.69,15.18-24.88,21.68-37.94v0A2.89,2.89,0,0,0,102,106.67Z" />
                         <path class="cls-2 shape-3" d="M180.32,172.74l-7.73-.16c-6.84-2.21-12.49-5.9-16.06-12.4-4-7.26-8.09-14.46-12.26-21.61-5.24-9-10.6-17.95-15.9-26.92-1.08-5.09-5.85-8.52-6.21-13.93l0-1c.59-2.9,3.76-4.08,4.54-6.85,24.84,1.81,49.72.24,74.57.93,7.84.22,13,5.05,16.89,11.46q5,8.26,10,16.53a169.6,169.6,0,0,0,14,24.28.52.52,0,0,0,.15.65.94.94,0,0,0,.94,1.08l0,0,1.08,1.95,0,0a3.2,3.2,0,0,0,1.86,3.12h0a12.25,12.25,0,0,0,4.06,7h0a4.36,4.36,0,0,0,2.11,3.94v0a24.88,24.88,0,0,1,.05,7.94h0c-2.93,3.1-6.48,4-10.75,4C221.14,172.5,200.73,172.67,180.32,172.74Z" />
@@ -481,7 +505,7 @@
                         <path class="cls-3 shape-5" d="M232.4,263.17l-1.11-.4-3-3-1-3.08a21.74,21.74,0,0,1,2.88-7.37q16.06-27.79,32-55.65c4.53-7.94,11.2-12,20.33-12,21.94,0,43.89.07,65.83-.07,4.42,0,7.73,1.31,9.91,5.2l.18,3.85-9.84,18a.84.84,0,0,0-.32.87,99.26,99.26,0,0,0-8.79,15.16l-.11.16q-.59.09-.46.64l-.71,1.67-.91,1.44a2.35,2.35,0,0,0-1.15,2c-3.37,5.67-6.95,11.22-10,17-3.34,6.26-7.43,11.64-13.92,14.86v-.05c-4.9,1.15-9.87,1.19-14.87,1.17-16.14-.06-32.29,0-48.43,0C243.36,263.57,237.86,264.09,232.4,263.17Z" />
 
                         <path class="cls-3 shape-6" d="M356.19,341.24c-.89-1.37-1.68-2.8-2.45-4.25s-1.51-2.91-2.29-4.35l0-.08,0-.08q-5.4-8.76-10.54-17.66t-9.94-18l-.84-1.49-.84-1.49c-.88-1.48-2-2.83-3-4.26a11.74,11.74,0,0,1-2.08-4.75h0a49.38,49.38,0,0,0-7.06-7.38,22.66,22.66,0,0,0-9.1-4.62l-35.85-.1-35.85-.1a10.82,10.82,0,0,0-4.43,1.16,12.52,12.52,0,0,0-3.6,2.83l-.17.57-.17.57-.28.52-.28.52h0a12.79,12.79,0,0,0,.75,4.12,22.83,22.83,0,0,0,1.81,3.82q6.14,10.7,12.19,21.46l12.13,21.49h0l3.49,5.5,3.49,5.5,2.64,3.88,2.29,3.35a15.75,15.75,0,0,0,6.34,4.91,29.65,29.65,0,0,0,7.76,2h67a34.94,34.94,0,0,0,4.67-.37,10,10,0,0,0,4.34-1.77l0,0,0,0a9.33,9.33,0,0,0,1.87-5.71A11.2,11.2,0,0,0,356.19,341.24Z" />
-                    </svg>
+                    </svg>-->
                 </div>
             </div>
         </body>

diff --git a/...in/content/jcr_root/etc/designs/cs/brightcove/shared/img/brightcove-loading.png b/...in/content/jcr_root/etc/designs/cs/brightcove/shared/img/brightcove-loading.png