WordPress.org
Get WordPress

Plugin Directory

Changeset 2853451


Ignore:
Timestamp:
01/24/2023 10:53:35 AM (3 years ago)
Author:
atikul99
Message:

New Style Added

Location:
ai-preloader/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • ai-preloader/trunk/admin/class-ai-preloader-admin.php

    r2821068 r2853451  
    167167            <option value="style4" <?php selected(get_option('demo-select'), "style4"); ?>>Style Four</option>
    168168            <option value="style5" <?php selected(get_option('demo-select'), "style5"); ?>>Style Five</option>
     169            <option value="style6" <?php selected(get_option('demo-select'), "style6"); ?>>Style Six</option>
    169170        </select>
    170171        <p class="description">Choose CSS loader style here.</p>
    … …  
    174175    function loader_bg_field_callback() {
    175176
    176         echo '<input type="text" name="loader_bg" value="' . get_option('loader_bg') . '" class="cpa-color-picker" data-alpha-enabled="true" data-default-color="rgba(34, 34, 34, 1)" >';
    177         echo '<p class="description">Choose background color, default color is #222.</p>';
     177        echo '<input type="text" name="loader_bg" value="' . get_option('loader_bg') . '" class="cpa-color-picker" data-alpha-enabled="true" data-default-color="rgba(17, 17, 17, 1)" >';
     178        echo '<p class="description">Choose background color, default color is #111.</p>';
    178179    }
    179180

  • ai-preloader/trunk/ai-preloader.php

    r2821068 r2853451  
    1515 * Plugin URI:        https://wordpress.org/plugins/ai-preloader
    1616 * Description:       AI Preloader is a static picture or animated css loaders displayed on-screen while the website is loading in the background.
    17  * Version:           1.0.0
     17 * Version:           1.0.1
    1818 * Author:            Atikul Islam
    1919 * Author URI:        https://atikul99.github.io/atikul
    … …  
    3434 * Rename this for your plugin and update it as you release new versions.
    3535 */
    36 define( 'AI_PRELOADER_VERSION', '1.0.0' );
     36define( 'AI_PRELOADER_VERSION', '1.0.1' );
    3737
    3838/**

  • ai-preloader/trunk/public/class-ai-preloader-public.php

    r2821068 r2853451  
    145145               
    146146                require_once plugin_dir_path( dirname( __FILE__ ) ) . 'templates/style5.php';
     147
     148            }elseif($setting == 'style6'){
     149
     150                require_once plugin_dir_path( dirname( __FILE__ ) ) . 'templates/style6.php';
    147151            }
    148152

  • ai-preloader/trunk/public/css/ai-preloader-public.css

    r2821068 r2853451  
    1414    width: 100%;
    1515    height: 100%;
     16    background-color: #111;
    1617    z-index: 99999;
    1718}
    … …  
    3536===============*/
    3637
    37 .preloader.style1 #loader {
    38     display: block;
     38.preloader.style1{
     39    display: flex;
     40    justify-content: center;
     41    align-items: center;
     42    height: 100vh;
     43}
     44.preloader.style1 .loader{
    3945    position: relative;
    40     left: 50%;
    41     top: 50%;
     46    width: 100%;
     47    display: flex;
     48    justify-content: center;
     49    align-items: center;
     50}
     51.preloader.style1 .loader .ring{
     52    position: relative;
     53    height: 150px;
    4254    width: 150px;
    43     height: 150px;
    44     margin: -75px 0 0 -75px;
    45     border-radius: 50%;
    46     border: 3px solid transparent;
    47     border-top-color: #9370DB;
    48     -webkit-animation: spin 2s linear infinite;
    49     animation: spin 2s linear infinite;
    50 }
    51 .preloader.style1 #loader:before {
     55    margin: -30px;
     56    border: 4px solid transparent;
     57    border-radius: 50%;
     58    border-top: 4px solid #24ecff;
     59    animation: animate 4s linear infinite;
     60}
     61@keyframes animate{
     62    0%{
     63        transform: rotate(0deg);
     64    }
     65    100%{
     66        transform: rotate(360deg);
     67    }
     68}
     69.preloader.style1 .loader .ring::before{
    5270    content: "";
    5371    position: absolute;
    54     top: 5px;
    55     left: 5px;
    56     right: 5px;
    57     bottom: 5px;
    58     border-radius: 50%;
    59     border: 3px solid transparent;
    60     border-top-color: #BA55D3;
    61     -webkit-animation: spin 3s linear infinite;
    62     animation: spin 3s linear infinite;
    63 }
    64 .preloader.style1 #loader:after {
     72    top: 12px;
     73    right: 12px;
     74    border-radius: 50%;
     75    height: 15px;
     76    width: 15px;
     77    background: #24ecff;
     78    box-shadow: 0 0 0 5px #24ecff33,
     79    0 0 0 10px #24ecff22,
     80    0 0 0 20px #24ecff11,
     81    0 0 20px #24ecff,
     82    0 0 50px #24ecff;
     83}
     84.preloader.style1 .loader .ring:nth-child(2){
     85    animation: animate2 4s linear infinite;
     86    animation-delay: -1s;
     87    border-top: 4px solid transparent;
     88    border-left: 4px solid #93ff2d;
     89}
     90.preloader.style1 .loader .ring:nth-child(2)::before{
    6591    content: "";
    6692    position: absolute;
    67     top: 15px;
    68     left: 15px;
    69     right: 15px;
    70     bottom: 15px;
    71     border-radius: 50%;
    72     border: 3px solid transparent;
    73     border-top-color: #FF00FF;
    74     -webkit-animation: spin 1.5s linear infinite;
    75     animation: spin 1.5s linear infinite;
    76 }
    77 @-webkit-keyframes spin {
    78     0%   {
    79         -webkit-transform: rotate(0deg);
    80         -ms-transform: rotate(0deg);
     93    top: initial;
     94    bottom: 12px;
     95    left: 12px;
     96    border-radius: 50%;
     97    height: 15px;
     98    width: 15px;
     99    background: #93ff2d;
     100    box-shadow: 0 0 0 5px #93ff2d33,
     101    0 0 0 10px #93ff2d22,
     102    0 0 0 20px #93ff2d11,
     103    0 0 20px #93ff2d,
     104    0 0 50px #93ff2d;
     105}
     106@keyframes animate2{
     107    0%{
     108        transform: rotate(360deg);
     109    }
     110    100%{
    81111        transform: rotate(0deg);
    82112    }
    83     100% {
    84         -webkit-transform: rotate(360deg);
    85         -ms-transform: rotate(360deg);
    86         transform: rotate(360deg);
    87     }
    88 }
    89 @keyframes spin {
    90     0%   {
    91         -webkit-transform: rotate(0deg);
    92         -ms-transform: rotate(0deg);
    93         transform: rotate(0deg);
    94     }
    95     100% {
    96         -webkit-transform: rotate(360deg);
    97         -ms-transform: rotate(360deg);
    98         transform: rotate(360deg);
    99     }
     113}
     114.preloader.style1 .loader .ring:nth-child(3){
     115    position: absolute;
     116    top: -66.66px;
     117    border-top: 4px solid transparent;
     118    border-left: 4px solid #e41cf8;
     119    animation: animate2 4s linear infinite;
     120    animation-delay: -3s;
     121}
     122.preloader.style1 .loader .ring:nth-child(3)::before{
     123    content: "";
     124    position: absolute;
     125    top: initial;
     126    bottom: 12px;
     127    left: 12px;
     128    border-radius: 50%;
     129    height: 15px;
     130    width: 15px;
     131    background: #e41cf8;
     132    box-shadow: 0 0 0 5px #e41cf833,
     133    0 0 0 10px #e41cf822,
     134    0 0 0 20px #e41cf811,
     135    0 0 20px #e41cf8,
     136    0 0 50px #e41cf8;
     137}
     138.preloader.style1 .loader p{
     139    position: absolute;
     140    color: #fff;
     141    font-size: 1.5em;
     142    font-family: consolas;
     143    bottom: -150px;
     144    letter-spacing: 0.15em;
    100145}
    101146
    … …  
    335380}
    336381
    337 
    338 
     382/*==============
     383 Style Six
     384===============*/
     385
     386.preloader.style6 #loader {
     387    display: block;
     388    position: relative;
     389    left: 50%;
     390    top: 50%;
     391    width: 150px;
     392    height: 150px;
     393    margin: -75px 0 0 -75px;
     394    border-radius: 50%;
     395    border: 3px solid transparent;
     396    border-top-color: #9370DB;
     397    -webkit-animation: spin 2s linear infinite;
     398    animation: spin 2s linear infinite;
     399}
     400.preloader.style6 #loader:before {
     401    content: "";
     402    position: absolute;
     403    top: 5px;
     404    left: 5px;
     405    right: 5px;
     406    bottom: 5px;
     407    border-radius: 50%;
     408    border: 3px solid transparent;
     409    border-top-color: #BA55D3;
     410    -webkit-animation: spin 3s linear infinite;
     411    animation: spin 3s linear infinite;
     412}
     413.preloader.style6 #loader:after {
     414    content: "";
     415    position: absolute;
     416    top: 15px;
     417    left: 15px;
     418    right: 15px;
     419    bottom: 15px;
     420    border-radius: 50%;
     421    border: 3px solid transparent;
     422    border-top-color: #FF00FF;
     423    -webkit-animation: spin 1.5s linear infinite;
     424    animation: spin 1.5s linear infinite;
     425}
     426@-webkit-keyframes spin {
     427    0%   {
     428        -webkit-transform: rotate(0deg);
     429        -ms-transform: rotate(0deg);
     430        transform: rotate(0deg);
     431    }
     432    100% {
     433        -webkit-transform: rotate(360deg);
     434        -ms-transform: rotate(360deg);
     435        transform: rotate(360deg);
     436    }
     437}
     438@keyframes spin {
     439    0%   {
     440        -webkit-transform: rotate(0deg);
     441        -ms-transform: rotate(0deg);
     442        transform: rotate(0deg);
     443    }
     444    100% {
     445        -webkit-transform: rotate(360deg);
     446        -ms-transform: rotate(360deg);
     447        transform: rotate(360deg);
     448    }
     449}
     450

  • ai-preloader/trunk/templates/style1.php

    r2821068 r2853451  
    1313
    1414    <div class="preloader style1">
    15         <div id="loader"></div>
     15        <div class="loader">
     16            <div class="ring"></div>
     17            <div class="ring"></div>
     18            <div class="ring"></div>
     19            <p>Loading...</p>
     20        </div>
    1621    </div>
     22
     23
Note: See TracChangeset for help on using the changeset viewer.