makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-07-23 10:28:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4704 from hanakin/ticket/14095

Browse source 
[ticket/14095] Pure CSS loader...No Image
This commit is contained in:
Marc Alexander 2017-03-19 17:27:47 +01:00
commit 644182398f
No known key found for this signature in database
GPG key ID: 50E0D2423696F995
8 changed files with 157 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
phpBB/adm/style/admin.css
View file

@ -1665,19 +1665,77 @@ input.button1:focus, input.button2:focus {
} }
} }
#loading_indicator { .loading_indicator {
background: #000000 url("../images/loading.gif") center center no-repeat;
border-radius: 5px;
display: none;
opacity: 0.8;
margin-top: -50px;
margin-left: -50px;
height: 50px;
width: 50px;
position: fixed; position: fixed;
left: 50%;
top: 50%; top: 50%;
left: 50%;
z-index: 51; z-index: 51;
display: none;
}
.loader {
width: 48px;
height: 48px;
padding: 12px;
}
.spinner {
animation: rotator 1s linear infinite;
}
.spinner-path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite;
}
@keyframes rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform: rotate(450deg);
}
}
@keyframes colors {
0% {
stroke: #4285f4;
}
25% {
stroke: #de3e35;
}
50% {
stroke: #f7c223;
}
75% {
stroke: #1b9a59;
}
100% {
stroke: #4285f4;
}
} }
/* Pagination /* Pagination

9
phpBB/adm/style/overall_footer.html
View file

@ -20,7 +20,14 @@
<div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}"> <div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
<div id="darken">&nbsp;</div> <div id="darken">&nbsp;</div>
</div> </div>
<div id="loading_indicator"></div> <div id="loading_indicator" class="loading_indicator">
<div class="loader">
<svg class="spinner" width="48px" height="48px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" aria-labelledby="loader-title" role="img">
<title id="loader-title">Loading...</title>
<circle class="spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}"> <div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
<a href="#" class="alert_close"></a> <a href="#" class="alert_close"></a>

6
phpBB/assets/javascript/core.js
View file

@ -27,11 +27,7 @@ phpbb.isTouch = (window && typeof window.ontouchstart !== 'undefined');
*/ */
phpbb.loadingIndicator = function() { phpbb.loadingIndicator = function() {
if (!$loadingIndicator) { if (!$loadingIndicator) {
$loadingIndicator = $('<div />', { $loadingIndicator = $('#loading_indicator');
id: 'loading_indicator',
class: 'loading_indicator',
});
$loadingIndicator.appendTo('#page-footer');
} }
if (!$loadingIndicator.is(':visible')) { if (!$loadingIndicator.is(':visible')) {

8
phpBB/styles/prosilver/template/overall_footer.html
View file

@ -18,6 +18,14 @@
<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}"> <div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
<div id="darken" class="darken">&nbsp;</div> <div id="darken" class="darken">&nbsp;</div>
</div> </div>
<div id="loading_indicator" class="loading_indicator">
<div class="loader">
<svg class="spinner" width="48px" height="48px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" aria-labelledby="loader-title" role="img">
<title id="loader-title">Loading...</title>
<circle class="spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}"> <div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
<a href="#" class="alert_close"> <a href="#" class="alert_close">

10
phpBB/styles/prosilver/template/simple_footer.html
View file

@ -8,8 +8,14 @@
<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}"> <div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
<div id="darken" class="darken">&nbsp;</div> <div id="darken" class="darken">&nbsp;</div>
</div> </div>
<div id="loading_indicator" class="loading_indicator"></div> <div id="loading_indicator" class="loading_indicator">
<div class="loader">
<svg class="spinner" width="48px" height="48px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" aria-labelledby="loader-title" role="img">
<title id="loader-title">Loading...</title>
<circle class="spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}"> <div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
<a href="#" class="alert_close"> <a href="#" class="alert_close">
<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i> <i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>

23
phpBB/styles/prosilver/theme/colours.css
View file

@ -1275,9 +1275,26 @@ input.disabled {
background-color: #000000; background-color: #000000;
} }
.loading_indicator { @keyframes colors {
background-color: #000000; 0% {
background-image: url('./images/loading.gif'); stroke: #4285f4;
}
25% {
stroke: #de3e35;
}
50% {
stroke: #f7c223;
}
75% {
stroke: #1b9a59;
}
100% {
stroke: #4285f4;
}
} }
.dropdown-extended ul li { .dropdown-extended ul li {

51
phpBB/styles/prosilver/theme/common.css
View file

@ -1028,20 +1028,57 @@ fieldset.fields1 dl.pmlist dd.recipients {
} }
.loading_indicator { .loading_indicator {
background: center center no-repeat;
border-radius: 5px;
opacity: 0.8;
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: 51; z-index: 51;
display: none; display: none;
width: 50px;
height: 50px;
margin-top: -50px;
margin-left: -50px;
} }
.loader {
width: 48px;
height: 48px;
padding: 12px;
}
.spinner {
animation: rotator 1s linear infinite;
}
.spinner-path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite;
}
@keyframes rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform: rotate(450deg);
}
}
/* Miscellaneous styles /* Miscellaneous styles
---------------------------------------- */ ---------------------------------------- */
.copyright { .copyright {

BIN
phpBB/styles/prosilver/theme/images/loading.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.3 KiB