Loading icon + Push notifications

This commit is contained in:
Vivek Teega 2020-09-02 21:18:32 +05:30
parent 2927725649
commit ba8170cc16

View File

@ -303,6 +303,33 @@
width: 14rem;
}
.spinner {
animation: Rotate 2.4s both infinite linear;
}
.path {
animation: DrawLine 1.6s both infinite alternate linear;
fill: none;
stroke: #000;
stroke-width: 50;
}
@keyframes Rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes DrawLine {
0% {
stroke-dasharray: 0 126;
}
100% {
stroke-dasharray: 126 126;
}
}
/*________________________________________________________________________________________________________________________________*/
/*MEDIAQUERIES*/
@ -382,7 +409,59 @@
</div>-->
</sm-popup>
<div class="content">
<div class="columns" id='columnsmain'>
<div id='loader_columnsmain'>
<svg class="spinner" viewBox="0 0 100 100" height="150px" width="150px" style="display:block; margin:auto">
<clipPath id="clip4">
<path d="M 50.027344 18.191406 A 31 31 0 0 0 19.029297 49.191406 A 31 31 0 0 0 50.029297 80.191406 A 31 31 0 0 0 67.878906 74.535156 L 67.154297 73.458984 A 29.700001 29.700001 0 0 1 50.029297 78.892578 A 29.700001 29.700001 0 0 1 20.330078 49.191406 A 29.700001 29.700001 0 0 1 50.029297 19.492188 A 29.700001 29.700001 0 0 1 79.730469 49.191406 A 29.700001 29.700001 0 0 1 77.251953 61.068359 L 78.425781 61.626953 A 31 31 0 0 0 81.029297 49.191406 A 31 31 0 0 0 50.029297 18.191406 A 31 31 0 0 1 50.027344 18.191406 z " />
<path d="M 61.01817,78.089719 61.271147,78.975135 61.207903,80.30326 60.575462,81.821118 59.753289,82.95951 58.994361,83.465463 H 58.551653 L 58.108944,82.95951 57.982456,81.757874 58.298676,80.30326 58.867873,79.3546 59.373825,78.785403 59.753289,78.405939 60.38573,78.216207 Z" />
<path d="M 54.728749,79.459955 54.78719,80.378945 54.442315,81.66307 53.500882,83.011246 52.454958,83.948236 51.605629,84.2808 51.173094,84.186438 50.8484,83.59775 50.980942,82.396767 51.59994,81.042981 52.35826,80.237442 52.973908,79.789167 53.425533,79.499304 54.083881,79.448734 Z" />
<path d="M 48.558586,79.878573 48.388748,80.783622 47.738049,81.943151 46.493406,83.017739 45.248828,83.668072 44.343737,83.781069 43.947797,83.583023 43.778194,82.932474 44.202619,81.801196 45.136154,80.64171 46.069603,80.047896 46.776736,79.765168 47.285866,79.595543 47.936372,79.708777 Z" />
<path d="M 61.791822,76.565856 61.604281,75.664309 60.930985,74.517754 59.665525,73.467762 58.408443,72.841942 57.50131,72.746702 57.109327,72.952468 56.952504,73.606216 57.399017,74.728961 58.355094,75.869931 59.3,76.445338 60.012537,76.714156 60.524894,76.873771 61.173056,76.747812 Z" />
<path d="M 56.023933,78.335208 56.017199,77.414386 55.582323,76.157884 54.547853,74.879704 53.43825,74.019072 52.567516,73.747441 52.142742,73.872172 51.860518,74.48236 52.077711,75.670955 52.790952,76.977547 53.604372,77.727406 54.250196,78.130994 54.7212,78.388174 55.381477,78.392032 Z" />
<path d="M 49.703044,78.909095 49.966492,78.026738 49.918985,76.697957 49.30457,75.172714 48.495941,74.024661 47.743059,73.509754 47.300382,73.504509 46.85171,74.005182 46.710997,75.205236 47.009963,76.663494 47.567882,77.61883 48.067056,78.19398 48.441998,78.577913 49.072147,78.775124 Z" />
<path d="M 35.82007,76.507367 35.351528,77.300101 34.344144,78.16791 32.807473,78.75316 31.415667,78.939654 30.526358,78.736948 30.221788,78.415657 30.284409,77.746285 31.069466,76.8278 32.342688,76.056566 33.422758,75.817007 34.183927,75.792608 34.720378,75.806941 35.293174,76.135399 Z" />
<path d="M 30.498712,72.885557 29.871969,73.560206 28.702764,74.193354 27.076662,74.43762 25.677087,74.32317 24.85142,73.935571 24.622332,73.556745 24.826188,72.916102 25.788975,72.186055 27.197324,71.703925 28.303636,71.700083 29.052514,71.838485 29.573583,71.966831 30.063206,72.409831 Z" />
<path d="M 25.950027,68.695615 25.176353,69.195002 23.887175,69.520482 22.251028,69.356477 20.922824,68.900644 20.218144,68.321521 20.08948,67.897922 20.444928,67.327277 21.557933,66.857016 23.041662,66.736831 24.1148,67.005748 24.806473,67.324435 25.279842,67.577235 25.645191,68.127235 Z" />
<path d="M 37.458248,76.020468 37.983515,75.264126 38.35241,73.986694 38.243835,72.345937 37.833186,71.003077 37.278227,70.279212 36.859222,70.136295 36.276881,70.47224 35.769246,71.568705 35.598949,73.047521 35.831418,74.129139 36.126529,74.831194 36.363175,75.312843 36.900503,75.696585 Z" />
<path d="M 32.206032,73.051735 32.869677,72.413351 33.482391,71.23331 33.698335,69.603206 33.559559,68.205834 33.157655,67.387034 32.774902,67.164569 32.137903,67.379538 31.424713,68.354879 30.967153,69.771401 30.982557,70.877612 31.133963,71.623969 31.271353,72.142727 31.722803,72.624571 Z" />
<path d="M 27.440967,68.859224 28.262573,68.443386 29.19424,67.494749 29.878473,65.999524 30.155351,64.622845 30.011081,63.722208 29.71034,63.397331 29.038309,63.416158 28.070575,64.139636 27.217937,65.359844 26.908441,66.421989 26.834447,67.179945 26.81376,67.716189 27.104158,68.309189 Z" />
<path d="M 20.102362,56.940303 19.199074,57.119273 17.880713,56.946531 16.420288,56.190862 15.353706,55.277459 14.912177,54.479329 14.948747,54.038133 15.489543,53.638733 16.697521,53.611944 18.12104,54.047248 19.019438,54.692866 19.544893,55.244111 19.891713,55.653623 20.028551,56.299577 Z" />
<path d="M 19.256372,50.559187 18.335695,50.541511 17.084447,50.091735 15.818651,49.042148 14.971265,47.922396 14.71,47.048496 14.83977,46.625235 15.453269,46.350282 16.639199,46.581583 17.937223,47.310299 18.677365,48.132572 19.073249,48.783147 19.324814,49.257173 19.320825,49.917449 Z" />
<path d="M 19.348894,44.375531 18.460968,44.131509 17.359156,43.387246 16.391059,42.058087 15.845761,40.764039 15.80792,39.852708 16.037997,39.474481 16.700333,39.359199 17.792683,39.875627 18.871087,40.901755 19.38576,41.881068 19.609107,42.609139 19.736093,43.130542 19.569509,43.769471 Z" />
<path d="M 21.557106,57.837197 22.471064,57.724772 23.669321,57.148493 24.820262,55.974096 25.547789,54.773009 25.717641,53.876845 25.544958,53.469204 24.9064,53.258911 23.750607,53.611149 22.534556,54.469705 21.883058,55.363847 21.556298,56.051742 21.354903,56.549162 21.426886,57.205514 Z" />
<path d="M 20.27028,51.942857 21.188511,52.012214 22.476643,51.682623 23.83591,50.757278 24.785264,49.722563 25.127896,48.877244 25.038682,48.443619 24.453893,48.111953 23.251419,48.230214 21.890373,48.833081 21.075881,49.581776 20.620321,50.192053 20.325113,50.640202 20.266722,51.297903 Z" />
<path d="M 20.220515,45.596164 21.078093,45.931603 22.406257,45.994027 23.977043,45.507711 25.187971,44.796685 25.763313,44.088912 25.80511,43.648182 25.343212,43.159682 24.158885,42.920316 22.680913,43.097796 21.682753,43.574888 21.068333,44.024843 20.65474,44.366787 20.406146,44.978492 Z" />
<path d="M 22.921373,34.095278 22.158959,33.578862 21.354757,32.520007 20.865137,30.950246 20.764606,29.549605 21.02163,28.674448 21.361046,28.390217 22.025299,28.493893 22.893755,29.333959 23.585212,30.652209 23.757884,31.74497 23.735416,32.506199 23.688115,33.040752 23.325045,33.59226 Z" />
<path d="M 26.863641,29.006775 26.228821,28.339721 25.668788,27.133783 25.525008,25.495736 25.725328,24.105852 26.162981,23.305588 26.55518,23.100235 27.18207,23.343112 27.851515,24.348982 28.246105,25.784318 28.18189,26.888773 27.997686,27.627719 27.837533,28.139907 27.365255,28.601355 Z" />
<path d="M 31.32544,24.724426 30.874587,23.921499 30.629021,22.614741 30.893355,20.991781 31.430022,19.69413 32.051393,19.026407 32.482104,18.924042 33.029805,19.313917 33.430714,20.453741 33.459407,21.942052 33.12499,22.996618 32.764363,23.667378 32.482925,24.124301 31.911493,24.455127 Z" />
<path d="M 23.306585,35.760303 24.029186,36.331098 25.281508,36.77787 26.925836,36.770423 28.291413,36.443151 29.048043,35.933769 29.216462,35.524347 28.916973,34.922445 27.853808,34.348328 26.388268,34.087391 25.294398,34.252889 24.575521,34.504259 24.080228,34.71083 23.664161,35.223536 Z" />
<path d="M 26.592761,30.700639 27.189115,31.402295 28.329233,32.086433 29.942968,32.402237 31.34623,32.349676 32.188201,31.998897 32.433787,31.630553 32.258406,30.981536 31.328782,30.209703 29.943086,29.66588 28.838022,29.613211 28.083766,29.718422 27.557539,29.823644 27.048838,30.2446 Z" />
<path d="M 31.070432,26.202478 31.434945,27.048108 32.32448,28.036361 33.774786,28.81127 35.131827,29.172302 36.039632,29.083704 36.382394,28.803516 36.404939,28.131598 35.742356,27.121197 34.576904,26.195118 33.535808,25.820875 32.783839,25.700399 32.249883,25.646767 31.640142,25.90014 Z" />
<path d="M 40.49588,20.070372 40.262175,19.179674 40.354224,17.853234 41.019455,16.349457 41.866136,15.229175 42.635866,14.739811 43.07847,14.749416 43.510096,15.264857 43.610477,16.468955 43.262765,17.916364 42.673118,18.85245 42.154931,19.410533 41.767325,19.781674 41.130914,19.957637 Z" />
<path d="M 46.813552,18.83694 46.775068,17.916899 47.147727,16.640557 48.118195,15.31313 49.184204,14.399056 50.040552,14.085 50.470937,14.188725 50.782778,14.784322 50.624207,15.982147 49.975979,17.322181 49.200356,18.111075 48.575125,18.545884 48.117317,18.825879 47.458026,18.862151 Z" />
<path d="M 52.991347,18.552314 53.180785,17.651163 53.856494,16.506027 55.124161,15.458701 56.382559,14.835528 57.289888,14.742199 57.681437,14.94879 57.836884,15.602866 57.388009,16.724667 56.429533,17.863622 55.483417,18.43704 54.770317,18.704357 54.257626,18.862894 53.60973,18.73557 Z" />
<path d="M 39.689341,21.577087 39.857275,22.482492 40.505531,23.643388 41.747909,24.720592 42.991115,25.373544 43.895966,25.488447 44.292322,25.291234 44.463295,24.641043 44.04125,23.508874 43.110158,22.347425 42.177961,21.751649 41.471425,21.467434 40.962652,21.296737 40.31191,21.4086 Z" />
<path d="M 45.494267,19.933315 45.481018,20.854067 45.888525,22.11971 46.895014,23.420038 47.98568,24.304545 48.850315,24.595007 49.277695,24.479523 49.573093,23.875601 49.381746,22.682574 48.697025,21.360813 47.900069,20.593478 47.263155,20.175971 46.797842,19.908632 46.137804,19.890446 Z" />
<path d="M 51.826122,19.496727 51.543587,20.37316 51.562249,21.702659 52.143421,23.240876 52.926947,24.406205 53.668477,24.937328 54.110937,24.952179 54.570369,24.46136 54.737089,23.264643 54.469837,21.80024 53.932782,20.833022 53.446207,20.247175 53.079684,19.855197 52.453962,19.644357 Z" />
<path d="M 64.064587,21.383541 64.567323,20.612038 65.611667,19.789078 67.172445,19.271538 68.57107,19.146042 69.450672,19.387417 69.740912,19.721709 69.6491,20.387706 68.824656,21.271006 67.518948,21.985865 66.429442,22.178 65.667933,22.169112 65.132622,22.131352 64.574725,21.778176 Z" />
<path d="M 69.222593,25.234425 69.878219,24.587809 71.073976,24.006357 72.709198,23.833385 74.102435,24.008882 74.910377,24.432194 75.122693,24.820667 74.891034,25.451789 73.897265,26.139069 72.469195,26.559196 71.36377,26.514689 70.621656,26.343693 70.106694,26.192701 69.636896,25.728728 Z" />
<path d="M 73.58384,29.619137 74.378598,29.154035 75.680768,28.885202 77.308184,29.120546 78.615201,29.633984 79.2939,30.243347 79.403931,30.672164 79.023887,31.226732 77.891394,31.647906 76.403831,31.70314 75.343469,31.387584 74.666384,31.038977 74.204514,30.765734 73.863548,30.200294 Z" />
<path d="M 62.406698,21.798387 61.848882,22.531055 61.424516,23.791145 61.46129,25.435079 61.812866,26.794602 62.335661,27.542026 62.748022,27.703116 63.344487,27.39294 63.89955,26.319704 64.134308,24.849744 63.949326,23.759 63.685174,23.04472 63.469802,22.553189 62.949756,22.146334 Z" />
<path d="M 67.524167,24.993798 66.83326,25.602574 66.169565,26.754712 65.882592,28.373822 65.960173,29.775923 66.325913,30.611505 66.698579,30.850482 67.344365,30.663553 68.099495,29.720311 68.618517,28.325136 68.651468,27.219308 68.532821,26.467049 68.41823,25.942782 67.988268,25.44167 Z" />
<path d="M 72.101474,29.390532 71.26248,29.770069 70.29025,30.677088 69.541331,32.140984 69.20456,33.504249 69.309335,34.410329 69.595592,34.748039 70.267804,34.758596 71.266227,34.078098 72.171372,32.896314 72.526988,31.84871 72.634034,31.094712 72.678133,30.559883 72.413925,29.954758 Z" />
<path d="M 78.850319,38.376906 79.73285,38.114041 81.061601,38.162425 82.586438,38.777852 83.733953,39.58724 84.248361,40.340463 84.253316,40.783143 83.752345,41.231483 82.552198,41.371401 81.094139,41.071469 80.139172,40.512921 79.564352,40.013364 79.180668,39.638171 78.983874,39.007889 Z" />
<path d="M 80.290812,44.650605 81.209092,44.58189 82.496996,44.912382 83.855614,45.838678 84.804246,46.874055 85.146288,47.719615 85.056771,48.153176 84.47175,48.484432 83.269358,48.365333 81.908735,47.761517 81.094764,47.012252 80.639633,46.401655 80.344736,45.953302 80.286806,45.29556 Z" />
<path d="M 80.778415,50.815702 81.685307,50.975407 82.852041,51.613098 83.940483,52.845642 84.604696,54.08287 84.727807,54.98664 84.534203,55.384769 83.885592,55.561639 82.749637,55.149892 81.579783,54.229384 80.975567,53.302634 80.684947,52.598708 80.509639,52.091508 80.61559,51.439776 Z" />
<path d="M 77.3179,37.620344 76.418505,37.817959 75.279553,38.504034 74.243782,39.781159 73.63206,41.045163 73.54697,41.953302 73.757109,42.34296 74.41257,42.492462 75.530251,42.033419 76.660456,41.064641 77.225259,40.113359 77.486089,39.397859 77.639966,38.883748 77.506765,38.237036 Z" />
<path d="M 79.151652,43.368082 78.230962,43.385117 76.979402,43.834018 75.712871,44.882717 74.864704,46.001877 74.602829,46.875596 74.732303,47.298947 75.345611,47.574328 76.531702,47.343858 77.830234,46.616047 78.57095,45.794291 78.967289,45.143993 79.219184,44.670142 79.215657,44.009863 Z" />
<path d="M 79.796198,49.682159 78.910949,49.428595 77.582783,49.490962 76.064507,50.122396 74.925571,50.943815 74.419117,51.702408 74.418822,52.145117 74.924483,52.588161 76.126034,52.715443 77.580858,52.400185 78.529894,51.831619 79.099426,51.326045 79.47914,50.94683 79.669292,50.314513 Z" />
</clipPath>
<path class="path" clip-path="url(#clip4)" d="M 66.249976,61.659254 C 59.810751,70.633869 47.315358,72.689205 38.340746,66.249976 29.366131,59.810751 27.310795,47.315358 33.750024,38.340746 40.189249,29.366131 52.684642,27.310795 61.659254,33.750024 70.633869,40.189249 72.689205,52.684642 66.249976,61.659254" />
</svg>
</div>
<div class="columns hide" id='columnsmain'>
<!--
<div class="column" id="column1">
<div class="head"><span class="headline hl3">When darkness overspreads my eyes</span>
@ -9920,6 +9999,9 @@
let parsedArticlesKeys = Object.keys(parsedarticles)
let map_articlekey_column = {}
document.getElementById('loader_columnsmain').classList.add('hide')
columns.classList.remove('hide')
for (let i = 0; i < parsedArticlesKeys.length; i++) {
columnhtml = `<div class="column" id="column${i + 1}" data-articlekey="${parsedArticlesKeys[i]}">
<div class="head">
@ -9973,7 +10055,7 @@
})
}
} else {
alert("Please login to vote")
notifications.push("Please login to upvote")
}
}