Added loader css into a new file and added it into webpack

f7336639 · Vipul Basapati · cd89331d · f7336639 · f7336639
Commit f7336639 authored Mar 31, 2018 by Vipul Basapati
Show whitespace changes
Inline Side-by-side

Showing with 1 addition and 120 deletions

app.blade.php resources/views/backend/layouts/app.blade.php +0 -120

webpack.mix.js webpack.mix.js +1 -0

No files found.
--- a/resources/views/backend/layouts/app.blade.php
+++ b/resources/views/backend/layouts/app.blade.php
@@ -40,126 +40,6 @@
                'csrfToken' => csrf_token(),
            ]); ?>
        </script>
-        <style type="text/css">
-            .loading {
-              position: fixed;
-              z-index: 999;
-              height: 2em;
-              width: 2em;
-              overflow: show;
-              margin: auto;
-              top: 0;
-              left: 0;
-              bottom: 0;
-              right: 0;
-            }
-
-            /* Transparent Overlay */
-            .loading:before {
-              content: '';
-              display: block;
-              position: fixed;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
-              background-color: rgba(0,0,0,0.3);
-            }
-
-            /* :not(:required) hides these rules from IE9 and below */
-            .loading:not(:required) {
-              /* hide "loading..." text */
-              font: 0/0 a;
-              color: transparent;
-              text-shadow: none;
-              background-color: transparent;
-              border: 0;
-            }
-
-            .loading:not(:required):after {
-              content: '';
-              display: block;
-              font-size: 10px;
-              width: 1em;
-              height: 1em;
-              margin-top: -0.5em;
-              -webkit-animation: spinner 1500ms infinite linear;
-              -moz-animation: spinner 1500ms infinite linear;
-              -ms-animation: spinner 1500ms infinite linear;
-              -o-animation: spinner 1500ms infinite linear;
-              animation: spinner 1500ms infinite linear;
-              border-radius: 0.5em;
-              -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
-              box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
-            }
-
-            /* Animation */
-
-            @-webkit-keyframes spinner {
-              0% {
-                -webkit-transform: rotate(0deg);
-                -moz-transform: rotate(0deg);
-                -ms-transform: rotate(0deg);
-                -o-transform: rotate(0deg);
-                transform: rotate(0deg);
-              }
-              100% {
-                -webkit-transform: rotate(360deg);
-                -moz-transform: rotate(360deg);
-                -ms-transform: rotate(360deg);
-                -o-transform: rotate(360deg);
-                transform: rotate(360deg);
-              }
-            }
-            @-moz-keyframes spinner {
-              0% {
-                -webkit-transform: rotate(0deg);
-                -moz-transform: rotate(0deg);
-                -ms-transform: rotate(0deg);
-                -o-transform: rotate(0deg);
-                transform: rotate(0deg);
-              }
-              100% {
-                -webkit-transform: rotate(360deg);
-                -moz-transform: rotate(360deg);
-                -ms-transform: rotate(360deg);
-                -o-transform: rotate(360deg);
-                transform: rotate(360deg);
-              }
-            }
-            @-o-keyframes spinner {
-              0% {
-                -webkit-transform: rotate(0deg);
-                -moz-transform: rotate(0deg);
-                -ms-transform: rotate(0deg);
-                -o-transform: rotate(0deg);
-                transform: rotate(0deg);
-              }
-              100% {
-                -webkit-transform: rotate(360deg);
-                -moz-transform: rotate(360deg);
-                -ms-transform: rotate(360deg);
-                -o-transform: rotate(360deg);
-                transform: rotate(360deg);
-              }
-            }
-            @keyframes spinner {
-              0% {
-                -webkit-transform: rotate(0deg);
-                -moz-transform: rotate(0deg);
-                -ms-transform: rotate(0deg);
-                -o-transform: rotate(0deg);
-                transform: rotate(0deg);
-              }
-              100% {
-                -webkit-transform: rotate(360deg);
-                -moz-transform: rotate(360deg);
-                -ms-transform: rotate(360deg);
-                -o-transform: rotate(360deg);
-                transform: rotate(360deg);
-              }
-            }
-        </style>
    </head>
    <body class="skin-{{ config('backend.theme') }} {{ config('backend.layout') }}">
        <div class="loading" style="display:none"></div>

--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -21,6 +21,7 @@ mix.sass('resources/assets/sass/frontend/app.scss', 'public/css/frontend.css')
        'public/js/select2/select2.css',
        'public/css/bootstrap.min.css',
        'public/css/custom-style.css',
+        'public/css/loader.css',
        'public/css/bootstrap-datetimepicker.min.css'
    ], 'public/css/backend-custom.css')
    .js([