=== Border Loading Bar ===

Contributors: John H. Ospina
Tags: loading, bar, progress, page, border, window, loader, progressbar
Requires at least: 3.0.1
Tested up to: 4.9.5
Requires PHP: 5.6
Stable tag: 1.0.1
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
Adds a load bar on any edge of the window to tell your users that the page is loading.

== Description ==

<span style="font-family: Verdana, sans-serif;"><span style="font-size: 12px;"><strong><span style="text-decoration: underline;">ENGLISH DESCRIPTION</span></strong></span></span>  
  
Adds a load bar on any edge of the window to tell your users that the page is loading. Do You Have a website that takes awhile to load? Regardless of the time that is takes to load, show your users the loading progress of the page, with a very simple and elegant bar positioned at the edge of the window. You can fully customize this loading bar to your liking. You can choose the size, colors, if you want to display a border around the bar, casting a shadow, you can even display a custom descriptive text to your users while they wait. 

**MAIN FEATURES**

<ul type="disc">
  <li>
    Great flexibility to customize the loading bar.
  </li>
  <li>
    Choose from the 4 edges of the window to locate the download bar.
  </li>
  <li>
    Customized sizes, locations, colors, styles, and text.
  </li>
  <li>
    Choose specifically the places of your web site to show the loading bar. Between pages and categories posts.
  </li>
  <li>
    The loading bar will disappear once the page is fully loaded.
  </li>
  <li>
    Shows a descriptive text fully customizable within the loading bar while your users expect.
  </li>
  <li>
    Test Mode, the loading bar will be visible only for the administrator.
  </li>
  <li>
    Light weight. It will not slow down anything on your page if you are not going to display "Border Loading Bar".
  </li>
  <li>
    It is compatible with any theme.
  </li>
  <li>
    Compatibility with any browser.
  </li>
  <li>
    Very easy to use and customize. Instructions are provided for each of the available settings.
  </li>
  <li>
    It is responsive. Fits any screen size.
  </li>
  <li>
    Programed successfully under the rules of WordPress.
  </li>
</ul>

 
**DETAILED DESCRIPTION OF THE SETTINGS**

<ul type="disc">
  <li>
    Choose on which edge of the screen you want to display the download bar. <ul type="circle">
      <li>
        Color. (You can choose any color you want)
      </li>
      <li>
        Wide. (Width)
      </li>
      <li>
        Direction. (What direction are you must fill the bar?)
      </li>
      <li>
        Opacity. (Transparency)
      </li>
    </ul>
  </li>
  
  <li>
    Choose if you want to project a shadow. Features adjustable on the shadow. <ul type="circle">
      <li>
        Color of the shadow.
      </li>
      <li>
        Scope. (If you want on the outside or inside the progress bar.)
      </li>
      <li>
        Position in the Y-axis.
      </li>
      <li>
        Position in the X-axis.
      </li>
      <li>
        Grayed-out.
      </li>
      <li>
        Rate of expansion.
      </li>
      <li>
        Opacity.
      </li>
    </ul>
  </li>
  
  <li>
    Choose if you would like to display a border that surrounds the progress bar. Features adjustable of the edge. <ul type="circle">
      <li>
        Color of the border.
      </li>
      <li>
        Thickness of the edge.
      </li>
      <li>
        Visibility of each edge.
      </li>
      <li>
        Rounding.
      </li>
      <li>
        Style of the border. (7 Styles available)
      </li>
      <li>
        Opacity.
      </li>
    </ul>
  </li>
  
  <li>
    Choose if you want to display a descriptive text within the loading bar. Adjustable features of the text. <ul type="circle">
      <li>
        Color of the text.
      </li>
      <li>
        The type of font.
      </li>
      <li>
        The Font size.
      </li>
      <li>
        Shadow.
      </li>
      <li>
        Rotation.
      </li>
      <li>
        Horizontal and vertical alignment.
      </li>
      <li>
        Content of the text. Type any text that you want to show on the loading bar. There are available 3 special tags for smart messages, among which are: <ul type="square">
          <li>
            Percentage Unit that indicates the load progress.
          </li>
          <li>
            Title of the post or page that is being loaded at the time.
          </li>
          <li>
            Username. (if the user has logged in)
          </li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li>
    Choose the background color of the loading bar.
  </li>
  <li>
    Choose the places on your page where you want to display the loading bar. <ul type="circle">
      <li>
        You can choose specific pages and categories of posts.
      </li>
    </ul>
  </li>
  
  <li>
    If you want to further customize the appearance of the "Border Loading Bar", you can add your own rules of CSS.
  </li>
</ul>

<div>
  <br />
</div>

<hr>
<hr>

<div>
  <p>
    <span style="font-family: Verdana, sans-serif;"><span style="font-size: 12px;"><strong><span style="text-decoration: underline;">DESCRIPCIÓN EN ESPAÑOL</span></strong></span></span><br />
  </p>
  
  <p class="MsoNormal">
    <span style="font-size: 7.5pt; font-family: Verdana, sans-serif;">Agrega una barra de carga en cualquier borde de la ventana para indicarles a tus usuarios que la página está cargando.</span>
  </p>
  
  <p class="MsoNormal">
    <span style="font-size: 7.5pt; font-family: Verdana, sans-serif;">¿Tienes un sitio web que tarda algún tiempo en cargar? Sin importar el tiempo en que este se demore cargando, muéstrales a tus usuarios el progreso de carga de la página, con una muy simple y elegante barra posicionada al borde la ventana. </span>
  </p>
  
  <p>
  </p>
  
  <p class="MsoNormal">
    <span style="font-size: 7.5pt; font-family: Verdana, sans-serif;">Puedes personalizar totalmente esta barra de carga a tu gusto. Puedes elegir el tamaño, los colores, si deseas mostrar un borde alrededor de la barra, proyectar una sombra, incluso mostrar un texto descriptivo personalizado para tus usuarios mientras esperan.</span>
  </p>
  
  <p>
     
  </p>
  
  <p>
    <strong>CARACTERISTICAS PRINCIPALES</strong>
  </p>
  
  <ul type="disc">
    <li>
      Gran flexibilidad para personalizar la barra de carga.
    </li>
    <li>
      Elige entre los 4 bordes de la ventana para ubicar la barra de carga. 
    </li>
    <li>
      Personaliza tamaños, ubicaciones, colores, estilos y texto.
    </li>
    <li>
      Elige específicamente los lugares de tu sitio web para mostrar la barra de carga. Entre páginas y categorías de tus entradas. 
    </li>
    <li>
      La barra de carga desaparecerá una vez que la pagina este totalmente cargada.
    </li>
    <li>
      Muestra un texto descriptivo totalmente personalizable dentro de la barra de carga mientras sus usuarios esperan. 
    </li>
    <li>
      Modo de pruebas, la barra de carga solo será visible para el administrador. 
    </li>
    <li>
      Peso liviano. No se cargara nada en tu página si no va a mostrar “Border Loading Bar”.
    </li>
    <li>
      Es compatible con cualquier tema. 
    </li>
    <li>
      Compatibilidad absoluta con cualquier navegador.
    </li>
    <li>
      Muy fácil de utilizar y personalizar. Se proporcionan instrucciones para cada uno de los ajustes disponibles.
    </li>
    <li>
      Es responsivo. Se adapta a cualquier tamaño de pantalla.
    </li>
    <li>
      Programado adecuamente bajo las normas de Wordpress.ding Bar", you can add your own rules of CSS.
    </li>
  </ul>
</div>

<div>
  <p>
     
  </p>
  
  <p>
    <strong>CARACTERISTICAS DETALLADAS DE LAS OPCIONES</strong>
  </p>
  
  <ul type="disc">
    <li>
      Elige en que borde de la pantalla deseas mostrar la barra de carga.<br /> <ul type="circle">
        <li>
          Color. (Puede elegir cualquier color que desee)
        </li>
        <li>
          Grosor. (Tamaño)
        </li>
        <li>
          Dirección. (¿A qué dirección se debe llenar la barra?)
        </li>
        <li>
          Opacidad. (Transparencia)
        </li>
      </ul>
    </li>
    
    <li>
      Elige si quieres proyectar una sombra. Características ajustables de la sombra.<br /> <ul type="circle">
        <li>
          Color de la sombra
        </li>
        <li>
          Ambito. (Si lo desea por fuera o dentro de la barra de progreso.)
        </li>
        <li>
          Posición en el eje X.
        </li>
        <li>
          Posición en el eje Y.
        </li>
        <li>
          Difuminado.
        </li>
        <li>
          Radio de expansión.
        </li>
        <li>
          Opacidad.
        </li>
      </ul>
    </li>
    
    <li>
      Elige si quieres mostrar un borde que rodee la barra de progreso. Características ajustables del borde.<br /> <ul type="circle">
        <li>
          Color del borde.
        </li>
        <li>
          Grosor del borde
        </li>
        <li>
          Visibilidad de cada borde.
        </li>
        <li>
          Redondeo.
        </li>
        <li>
          Estilo del borde. (7 Estilos disponibles)
        </li>
        <li>
          Opacidad.
        </li>
      </ul>
    </li>
    
    <li>
      Elige si desea mostrar un texto descriptivo dentro de la barra de carga. Características ajustables del texto.<br /> <ul type="circle">
        <li>
          Color del texto.
        </li>
        <li>
          Tipo de fuente.
        </li>
        <li>
          Tamaño del a fuente.
        </li>
        <li>
          Sombra del texto.
        </li>
        <li>
          Rotación.
        </li>
        <li>
          Alineación vertical y horizontal.
        </li>
        <li>
          Contenido del texto. Escriba cualquier texto que desee mostrar en la barra de carga. Hay disponibles 3 etiquetas especiales para mensajes inteligentes, entre los cuales están: <ul type="square">
            <li>
              Unidad porcentual que indica el progreso de carga.
            </li>
            <li>
              Titulo de la entrada o página que se esté cargando en el momento.
            </li>
            <li>
              Nombre del usuario. (Si este ha iniciado sesión)
            </li>
          </ul>
        </li>
      </ul>
    </li>
    
    <li>
      Elige el color del fondo de la barra de carga. 
    </li>
    <li>
      Elige los lugares de tu página en donde quieres que se visualice la barra de carga.<br /> <ul type="circle">
        <li>
          Puedes elegir específicamente páginas y categorías de entradas. 
        </li>
      </ul>
    </li>
    
    <li>
      Si deseas personalizar aún más la apariencia de la barra de carga, puedes agregar tus propias reglas de CSS.
    </li>
  </ul>
</div>





== Installation ==



Upload the plugin zip file borderLoadingBar.zip in your WordPress plugins area.



Or, if you want to install it manually, unzip borderLoadingBar.zip in your computer.  This will create a folder called borderLoadingBar, after this, upload the folder and all its files via FTP to the Wordpress folder wp-content/plugins/ on your web server. 



Activate the Border Loading Bar plugin in your Plugins area in your WordPress adminstration, and is already. it’s ready to use!




== Frequently Asked Questions ==

**How do I use?**

After you activated the plugin, the plugin's settings page will be available in Settings > Border Loading Bar in your administration area of Wordpress. 

The plugin settings are divided into sections, and each setting has precise instructions about what they do. Some adjustments will not be displayed if not needed. Browse through the settings from top to bottom.
Before you can see Border Loading Bar running on your Web site, you must activate your operation in the configuration page Settings > Border Loading Bar. This happens so that you can make all needed adjustments before displaying it openly to the public. 
It is recommended that you enable the Test Mode located in the first section called General Options of the configuration page for the plugin, so that you are the only one  that can see the Border Loading Bar running on your web site and can carry out any adjustments with comfort.

**Activate Border Loading Bar for the Public**

To ensure that all users can see  the operation of the Border Loading Bar on your website, you must ensure that it is enabled on the configuration page for the plugin and the Test Mode is turned off. In this way, all users can view Border Loading Bar in operation.

**How does it work?**

Most of the time, the websites have a large quantity of images or they have a large size, which causes the load time of your page to be much slower. Border Loading Bar is responsible for representing that load time on a progress bar, ideal for users who need to show proof of the time that it takes for the page to load. </br></br>
Border Loading Bar not only represents the load time of the images, if not also the rest of the contents of a page, thus making more accurate representation of the load time.

== Screenshots ==


1. screenshot-1.png

2. screenshot-2.png

3. screenshot-3.png


4. screenshot-4.png



== Changelog ==
= 1.0 =
* First stable version.
* Another change.