mirror/munki
1
0
Fork 0
mirror of https://github.com/munki/munki.git synced 2026-01-06 22:49:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

CSS Based Progress Spinner (#1173)

Browse Source 
Updated indeterminate progress spinner built with just CSS and redesigned to better match the updated progress indicator in later versions of macOS.
This commit is contained in:
Christopher Grande
2023-04-18 17:46:52 -04:00
committed by GitHub
parent 6c27df4831
commit 535751b460
11 changed files with 165 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/base.css
View File

@@ -117,104 +117,6 @@ body, button, input {
color: var(--text-color-normal);
}
@-webkit-keyframes generic-loading-spinner-animation {
0% {
-webkit-transform: rotate(0deg)
}
8.32% {
-webkit-transform: rotate(0deg)
}
8.33% {
-webkit-transform: rotate(30deg)
}
16.65% {
-webkit-transform: rotate(30deg)
}
16.66% {
-webkit-transform: rotate(60deg)
}
24.99% {
-webkit-transform: rotate(60deg)
}
25% {
-webkit-transform: rotate(90deg)
}
33.32% {
-webkit-transform: rotate(90deg)
}
33.33% {
-webkit-transform: rotate(120deg)
}
41.65% {
-webkit-transform: rotate(120deg)
}
41.66% {
-webkit-transform: rotate(150deg)
}
49.99% {
-webkit-transform: rotate(150deg)
}
50% {
-webkit-transform: rotate(180deg)
}
58.32% {
-webkit-transform: rotate(180deg)
}
58.33% {
-webkit-transform: rotate(210deg)
}
66.65% {
-webkit-transform: rotate(210deg)
}
66.66% {
-webkit-transform: rotate(240deg)
}
74.99% {
-webkit-transform: rotate(240deg)
}
75% {
-webkit-transform: rotate(270deg)
}
83.32% {
-webkit-transform: rotate(270deg)
}
83.33% {
-webkit-transform: rotate(300deg)
}
91.65% {
-webkit-transform: rotate(300deg)
}
91.66% {
-webkit-transform: rotate(330deg)
}
100% {
-webkit-transform: rotate(330deg)
}
}
a.anchor[name] {
height: 0;
width: 0
@@ -993,22 +895,6 @@ div.msc-button-inner.install-updates:not(.installed-not-removable):active:hover
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAaCAIAAACsB0LYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmZJREFUeNpiPHbsGAsLy38kwMDAACT//fsH4UIYEEFOTk7iFT/8pQBR8h8V/EMXBClnARJGRkb/MQDExH9gABe8desW8Yofnv6oq8DzFyz4FwT+/QERUDaEhOgAQiYGmgJGMIKxGRkZUeUQgMbuIBqMumNwuoMFmXPl6tUL5y/8B7MhaV5XV0dDXR2rzpWrVi9YsJABnvT+/4+JiQ4M8Icr+P7tKwMDNyM4RR7et33vtrXIii0dvY0sHEEijMBMjBoeujo6AoICLDAgKCior6eHyweREeEKigocMKCkrBQbE42SV2C2Ail37yBpWYRiKVkFOxdvnPHCxMRkamrKBAZAUyzMzYG5G2dIsrBkZ2UxMzMDGUCyIC/vz58/qJkWkTN//PwZHJUMV+wfnvjjx0/kvIviDmDJIiUpKS8nC4wRJSVFMTFRoAgud/z69cvI0MDO1hqo2MXZSVtbCyiC4iuoO0BlCDDoxaXl9U0sgYqNzG35BMUg5SjcKejpFOgnAwMDLi5OQwMDNHMxwc+fPxMTEoSFhRIT4r98+YJRiIEcAo8coGIXzxA+AUF714DfIJNRSjUs+YWLi8vTw4OdnZ2YdC4sLDxpQj8vLy+WshSUBlGLTybmnNKW33/+wiKNESGDqR8YJEBHEAwMaMT/+AF0xNevX/GV6lD3MAIrla/ffwBrE6TCnhFLvoWD379/E5/1v3//jlWclZUVWrv++w+pzoDsP9DK7T8YQcT+j5ano+4YdQf59S11wc8f3xkZeUClOxOwXGf6D6plGZjBTWQGcDsZEgr/Gf4x/mMcjZdRd+ADAAEGAE4tsrGq30G3AAAAAElFTkSuQmCC)
}
div.progress-spinner {
background: url(progress-spinner.png) 0 0 no-repeat;
-webkit-background-size: 20px 20px;
opacity: 1;
width: 20px;
height: 20px;
-webkit-animation-name: 'generic-loading-spinner-animation';
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
float: left;
position: relative;
top: 6px;
left: -14px;
}
p[data-text-truncate-lines] {
height: auto;
display: -webkit-box;
@@ -1265,36 +1151,6 @@ span.warning {
color: var(--text-color-warning) !important;
}
span.downloading>span.progress-spinner,
span.preparing-removal>span.progress-spinner,
span.installing>span.progress-spinner,
span.removing>span.progress-spinner,
div.lockup li.downloading span.progress-spinner,
div.lockup li.preparing-removal span.progress-spinner,
div.lockup li.installing span.progress-spinner,
div.lockup li.removing span.progress-spinner {
visibility: visible !important;
float: right;
background: url(progress-spinner.png) 0 0 no-repeat;
-webkit-background-size: 20px 20px;
opacity: 1;
width: 20px;
height: 20px;
-webkit-animation-name: 'generic-loading-spinner-animation';
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
}
div.lockup li.downloading span.progress-spinner,
div.lockup li.preparing-removal span.progress-spinner,
div.lockup li.installing span.progress-spinner,
div.lockup li.removing span.progress-spinner {
position: absolute;
bottom: 20px;
right: 20px;
}
div.lockup li.not-installed,
div.lockup li.installing,
div.lockup li.removing {

4
code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/detail.css
View File

@@ -188,10 +188,6 @@ div.more-by div.msc-button-inner {
background: white;
}
span.progress-spinner {
margin-right: 32px;
}
/* display a variable number of related items based on screen width */
/* display 2 items if window is under 1000px wide*/
@media only screen and (max-width: 999px) {

120
code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/progress-spinner.css Normal file
View File

@@ -0,0 +1,120 @@
.spinner {
font-size: 32px;
position: relative;
display: inline-block;
width: 1em;
height: 1em;
}
.spinner.center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.spinner.right {
margin-right: 4px;
position: absolute;
bottom: 20px;
right: 0px
}
.spinner.updates {
margin-right: 4px;
position: relative;
left: 0px;
float: left;
top: -6px;
}
.spinner-blade {
position: absolute;
left: 0.4629em;
bottom: 0;
width: 0.074em;
height: 0.1777em;
border-radius: 0.5em;
background-color: transparent;
transform-origin: center -0.1222em;
-webkit-animation: spinner-fade 1s infinite linear;
}
.spinner-blade:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
transform: rotate(0deg);
}
.spinner-blade:nth-child(2) {
-webkit-animation-delay: 0.123s;
animation-delay: 0.123s;
transform: rotate(45deg);
}
.spinner-blade:nth-child(3) {
-webkit-animation-delay: 0.246s;
animation-delay: 0.246s;
transform: rotate(90deg);
}
.spinner-blade:nth-child(4) {
-webkit-animation-delay: 0.369s;
animation-delay: 0.369s;
transform: rotate(135deg);
}
.spinner-blade:nth-child(5) {
-webkit-animation-delay: 0.492s;
animation-delay: 0.492s;
transform: rotate(180deg);
}
.spinner-blade:nth-child(6) {
-webkit-animation-delay: 0.615s;
animation-delay: 0.615s;
transform: rotate(225deg);
}
.spinner-blade:nth-child(7) {
-webkit-animation-delay: 0.738s;
animation-delay: 0.738s;
transform: rotate(270deg);
}
.spinner-blade:nth-child(8) {
-webkit-animation-delay: 0.861s;
animation-delay: 0.861s;
transform: rotate(315deg);
}
@-webkit-keyframes spinner-fade {
0% {
background-color: var(--text-color-subdued);
}
100% {
background-color: transparent;
}
}
div.lockup div.spinner {
visibility: hidden;
}
span.downloading>div.spinner,
span.preparing-removal>div.spinner,
span.installing>div.spinner,
span.removing>div.spinner,
div.lockup li.downloading div.spinner,
div.lockup li.preparing-removal div.spinner,
div.lockup li.installing div.spinner,
div.lockup li.removing div.spinner {
visibility: visible !important;
float: right;
opacity: 1;
width: 20px;
height: 20px;
}
div.lockup li.downloading div.spinner,
div.lockup li.preparing-removal div.spinner,
div.lockup li.installing div.spinner,
div.lockup li.removing div.spinner {
position: absolute;
bottom: 20px;
right: 20px;
}

BIN
code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/progress-spinner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

8
code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/updates.css
View File

@@ -44,7 +44,7 @@ div.installations table:not(.no-header):before {
div.installations thead {
border-radius: 5px 5px 0 0;
height: 42px;
border-bottom: 1px solid #d7d7d7;
border-bottom: 1px solid var(--line-color);
}
div.installations th {
color: var(--text-color-normal);
@@ -69,12 +69,6 @@ div.non-scan-progress {
font-size: 16px;
}
#updates-progress-spinner {
margin-right: 4px;
position: relative;
left: 0px;
}
div.installations th:first-child {
-webkit-border-top-left-radius: 5px
}

12
code/apps/Managed Software Center/Managed Software Center/Resources/templates/detail_template.html
View File

@@ -6,6 +6,7 @@
<link charset="utf-8" rel="stylesheet" type="text/css" href="static/base.css" />
<link charset="utf-8" rel="stylesheet" type="text/css" href="static/detail.css" />
<link charset="utf-8" rel="stylesheet" type="text/css" href="static/progress-spinner.css" />
<script type="text/javascript" charset="utf-8" src="static/integration.js"></script>
</head>
@@ -80,7 +81,16 @@
${status_text}
</span>
<a class="follow" href="munki://updates.html"></a>
<span class="progress-spinner"></span>
<div class="spinner left">
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
</div>
</span>
</div>
<div class="lockup small detailed option information-item">

11
code/apps/Managed Software Center/Managed Software Center/Resources/templates/list_item_template.html
View File

@@ -10,7 +10,16 @@
<li class="${status}" id="${name_escaped}_status_text">
<span id="${name_escaped}_status_text_span">${status_text}</span>
<a class="follow" href="munki://updates.html"></a>
<span class="progress-spinner"></span>
<div class="spinner right">
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
</div>
</li>
<li class="button">
<div class="msc-button small">

1
code/apps/Managed Software Center/Managed Software Center/Resources/templates/list_template.html
View File

@@ -7,6 +7,7 @@
<title>Managed Software Center</title>
<link charset="utf-8" rel="stylesheet" type="text/css" href="static/base.css" />
<link charset="utf-8" rel="stylesheet" type="text/css" href="static/progress-spinner.css" />
<script type="text/javascript" charset="utf-8" src="static/itemlist.js"></script>
<script type="text/javascript" charset="utf-8" src="static/integration.js"></script>

11
code/apps/Managed Software Center/Managed Software Center/Resources/templates/myitems_item_template.html
View File

@@ -11,7 +11,16 @@
<li class="${status}" id="${name_escaped}_status_text">
<span id="${name_escaped}_status_text_span">${status_text}</span>
<a class="follow" href="munki://updates.html"></a>
<span class="progress-spinner"></span>
<div class="spinner right">
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
</div>
</li>
<li class="button">
<div class="msc-button small">

1
code/apps/Managed Software Center/Managed Software Center/Resources/templates/myitems_template.html
View File

@@ -8,6 +8,7 @@
<link charset="utf-8" rel="stylesheet" type="text/css" href="static/base.css" />
<link charset="utf-8" rel="stylesheet" type="text/css" href="static/updates.css" />
<link charset="utf-8" rel="stylesheet" type="text/css" href="static/progress-spinner.css" />
<script type="text/javascript" charset="utf-8" src="static/integration.js"></script>
</head>

12
code/apps/Managed Software Center/Managed Software Center/Resources/templates/updates_template.html
View File

@@ -8,6 +8,7 @@
<link charset="utf-8" rel="stylesheet" type="text/css" href="static/base.css" />
<link charset="utf-8" rel="stylesheet" type="text/css" href="static/updates.css" />
<link charset="utf-8" rel="stylesheet" type="text/css" href="static/progress-spinner.css" />
<script type="text/javascript" charset="utf-8" src="static/updates.js"></script>
<script type="text/javascript" charset="utf-8" src="static/integration.js"></script>
@@ -34,7 +35,16 @@
<span class="warning" id="update-warning-text">
${warning_text}
</span>
<div class='progress-spinner ${hide_progress_spinner}' id="updates-progress-spinner"></div>
<div class="spinner updates ${hide_progress_spinner}">
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
</div>
<div class="msc-button install-updates in-header">
<button class="button-area uppercase"
onClick="window.webkit.messageHandlers.installButtonClicked.postMessage('');">