Should have sample overlay-template.html and css

[ghost]

I know, angularjs is dying but... I am still using it. It took me quite a while to realize that overlay-template.html and css are missing from the dist folder. I hope the owner may add , if not, here you go:

overlay-template.html

`<div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin:auto; background-color: rgba(255,255,255,0.7);

display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;

" >

`

css : extract from the demo

`

.bs-docs-masthead { padding-top: 50px; padding-bottom: 40px; margin-bottom: 20px; }

.bs-docs-header h1, .bs-docs-header p { margin-right: 0px; }

.bs-docs-sidebar .nav > li > a { font-size: 15px; }

.bs-docs-sidebar .nav .nav > li > a { font-size: 14px; }

.back-top-top { font-size: 13px; }

.bs-loading-container { position: relative; margin-top: 15px; }

#content { position: relative; }

#content:after { content: ""; position: absolute; bottom: 0px; right: 0px; height: 50px; width: 30%; background: linear-gradient(135deg, transparent 50px, white 50px); }

.bs-docs-masthead .version { color: #FFF; }

.bs-docs-dl dt { margin-top: 25px; padding-left: 25px; }

.bs-docs-dl dd { margin-top: 10px; padding-left: 50px; }

.tab-pane pre[class*="language-"] { margin: 0; border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; } `

hope it may help someone in the future

[raszkiewicz]

Also you can add spinner to the HTML template

    <div id="floatingCirclesG">
        <div class="f_circleG" id="frotateG_01"></div>
        <div class="f_circleG" id="frotateG_02"></div>
        <div class="f_circleG" id="frotateG_03"></div>
        <div class="f_circleG" id="frotateG_04"></div>
        <div class="f_circleG" id="frotateG_05"></div>
        <div class="f_circleG" id="frotateG_06"></div>
        <div class="f_circleG" id="frotateG_07"></div>
        <div class="f_circleG" id="frotateG_08"></div>
    </div>

    <style>
        #floatingCirclesG {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 51px;
            height: 51px;
            margin: auto;
            transform: scale(0.6);
            -o-transform: scale(0.6);
            -ms-transform: scale(0.6);
            -webkit-transform: scale(0.6);
            -moz-transform: scale(0.6);
        }

        .f_circleG {
            position: absolute;
            background-color: rgb(255, 255, 255);
            height: 9px;
            width: 9px;
            border-radius: 5px;
            -o-border-radius: 5px;
            -ms-border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            animation-name: f_fadeG;
            -o-animation-name: f_fadeG;
            -ms-animation-name: f_fadeG;
            -webkit-animation-name: f_fadeG;
            -moz-animation-name: f_fadeG;
            animation-duration: 0.622s;
            -o-animation-duration: 0.622s;
            -ms-animation-duration: 0.622s;
            -webkit-animation-duration: 0.622s;
            -moz-animation-duration: 0.622s;
            animation-iteration-count: infinite;
            -o-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-direction: normal;
            -o-animation-direction: normal;
            -ms-animation-direction: normal;
            -webkit-animation-direction: normal;
            -moz-animation-direction: normal;
        }

        #frotateG_01 {
            left: 0;
            top: 21px;
            animation-delay: 0.2295s;
            -o-animation-delay: 0.2295s;
            -ms-animation-delay: 0.2295s;
            -webkit-animation-delay: 0.2295s;
            -moz-animation-delay: 0.2295s;
        }

        #frotateG_02 {
            left: 6px;
            top: 6px;
            animation-delay: 0.316s;
            -o-animation-delay: 0.316s;
            -ms-animation-delay: 0.316s;
            -webkit-animation-delay: 0.316s;
            -moz-animation-delay: 0.316s;
        }

        #frotateG_03 {
            left: 21px;
            top: 0;
            animation-delay: 0.3925s;
            -o-animation-delay: 0.3925s;
            -ms-animation-delay: 0.3925s;
            -webkit-animation-delay: 0.3925s;
            -moz-animation-delay: 0.3925s;
        }

        #frotateG_04 {
            right: 6px;
            top: 6px;
            animation-delay: 0.469s;
            -o-animation-delay: 0.469s;
            -ms-animation-delay: 0.469s;
            -webkit-animation-delay: 0.469s;
            -moz-animation-delay: 0.469s;
        }

        #frotateG_05 {
            right: 0;
            top: 21px;
            animation-delay: 0.5455s;
            -o-animation-delay: 0.5455s;
            -ms-animation-delay: 0.5455s;
            -webkit-animation-delay: 0.5455s;
            -moz-animation-delay: 0.5455s;
        }

        #frotateG_06 {
            right: 6px;
            bottom: 6px;
            animation-delay: 0.622s;
            -o-animation-delay: 0.622s;
            -ms-animation-delay: 0.622s;
            -webkit-animation-delay: 0.622s;
            -moz-animation-delay: 0.622s;
        }

        #frotateG_07 {
            left: 21px;
            bottom: 0;
            animation-delay: 0.6985s;
            -o-animation-delay: 0.6985s;
            -ms-animation-delay: 0.6985s;
            -webkit-animation-delay: 0.6985s;
            -moz-animation-delay: 0.6985s;
        }

        #frotateG_08 {
            left: 6px;
            bottom: 6px;
            animation-delay: 0.775s;
            -o-animation-delay: 0.775s;
            -ms-animation-delay: 0.775s;
            -webkit-animation-delay: 0.775s;
            -moz-animation-delay: 0.775s;
        }

        <a href='https://github.com/keyframes' class='user-mention'>@keyframes</a> f_fadeG {
            0% {
                background-color: rgb(0, 0, 0);
            }
            100% {
                background-color: rgb(255, 255, 255);
            }
        }

        @-o-keyframes f_fadeG {
            0% {
                background-color: rgb(0, 0, 0);
            }
            100% {
                background-color: rgb(255, 255, 255);
            }
        }

        @-ms-keyframes f_fadeG {
            0% {
                background-color: rgb(0, 0, 0);
            }
            100% {
                background-color: rgb(255, 255, 255);
            }
        }

        @-webkit-keyframes f_fadeG {
            0% {
                background-color: rgb(0, 0, 0);
            }
            100% {
                background-color: rgb(255, 255, 255);
            }
        }

        @-moz-keyframes f_fadeG {
            0% {
                background-color: rgb(0, 0, 0);
            }
            100% {
                background-color: rgb(255, 255, 255);
            }
        }
    </style